


ET 图 灵 程 序 设 计 丛 书 leu 
des 


Stunning CSS3 A project-based guide to the latest 1n CSS 


CSS: 
实用 指南 


[Æ] Zoe Mickley Gillenwater X 








e 设计 优美 的 网 站 一 定 要 学 的 CSS3 
国 化 繁 为 向 ， 基 于 实战 项 目 讲 解 
国 亚马逊 网 站 一 致 好 评 


民 邮 电 出 版 社 


POSTS & TELECOM PRESS 


AK 





Zoe Mickley Gillenwater 

经 验 丰 富 的 图 形 和 Web 设 计 师 、 开 发 人 员 、 顾 问 。 致 
力 于 打造 尽 可 能 满足 各 类 人 和 群 需求 的 优秀 网 站 ， 并 为 
最 新 的 浏览 器 使 用 创新 的 CSS 技 术 。 她 是 Flexible Web 
Design: Creating Liquid and Elastic Layouts with CSS 
和 视频 培训 教程 Web Accessibility Principles 的 作者 ， 
并 已 经 为 Smashing Magazine 和 Community MX 网 站 撰 
写 了 上 百 篇 以 Web 设 计 和 开发 为 主题 的 文章 。Zoe 目 前 
是 Web 标 准 计划 小 组 ( WaSP ) Adobe 任 务 组 的 成 员 之 
一 ， 还 是 热门 的 css-discuss 邮 件 列表 的 主持 人 ， 并 经 
常 在 全 国 性 会 议 上 讲授 CSS、 视 觉 设 计 、 可 访问 性 等 
主题 。 
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内 容 提 要 
本 书 是 一 本 传播 很 广 的 关于 CSS3 应 用 方面 的 图 书 。 它 介绍 了 如 何 应 用 CSS3 才能 比 传统 方法 更 加 高 
效 、 灵 活 地 实现 一 些 常 见 而 优美 的 网 页 设计 效果 。 本 书 通 过 一 系列 务实 而 创新 的 项 目 ， 在 实践 中 为 读者 讲 
WE CSS3 应 用 的 前 沿 搁 巧 。 男 外 本 书 还 整理 了 每 一 项 CSS3 属性 、 选 择 副 和 值 的 使 用 方法 ， 为 读者 提供 了 
示例 之 外 的 实用 性 极 强 的 实践 指导 。 
本 书 适合 网 站 开发 人 员 与 网 页 设计 师 阅 读 。 
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译 者 序 


本 书 原名 为 Stunning CS3， 起 急 我 们 将 其 直译 为 《惊艳 的 CSS3》， 因 为 你 可 以 在 书 中 的 一 
些 角 落 找到 能 够 与 忆 呼 应 的 “ 令 人 慨 艳 一 词 。 现 名 《CSS3 实用 指南 》 则 显得 朴素 而 直接 ， 事 
实 上 也 更 能 阐述 本 书 的 主旨 : BR OARS “AR” 之 外 ,更 重要 的 还 是 通过 真实 的 项 目 实 操 
来 全 面 了 解 CSS3 技术 。 其 中 最 具 实用 意义 的 训 贤 右 兼容 方案 的 内 容 则 更 是 能 够 帮助 你 马上 将 这 
些 新 技术 运用 到 实际 项 目 之 中 一 一 毕竟 对 于 国内 的 Web 开发 者 来 说 ， 高 居 不 下 的 IE 6 占有 率 仍 
自我 们 眼下 无 法 逃避 的 现实 。 

要 介绍 本 书 的 内 容 ， 就 不 得 不 提 到 CSS CRB) 的 发 展 史 。 作 为 Web 开发 中 一 种 可 
将 外 观 和 内 容 分 离 的 技术 手段 ，CSS 的 出 现 和 发 展 已 历经 了 十 几 个 年 头 ， 莫 至 于 今年 六 月 刚刚 摘 
fü RE” WAP CSS 2.1 标 准 ， 距 离 其 上 一 个 版 本 2.0 也 有 和 近 十 三 年 之 和 下 了， 十 时 候 应 该 出 现 
一 种 新 的 技术 标准 来 驱动 更 高 级 的 生产 方式 , 以 适应 互联 网 日 新 月 异 的 变化 以 及 对 用 户 体 验 的 极 
致 起 求 了 。 因 此 ， 早 在 2001 年 W3C 就 开始 了 对 新 的 CSS3 标准 的 规划 工作 。 时 至 今日 ， 正 如 我 
们 所 见 ， 在 训 览 右 支 持 度 不 断 被 更 新 的 大 赵 荔 下 ，CSS3 正在 为 Web 设计 师 和 开发 者 开拓 一 条 轿 
新 的 道路 一 一 它 并 不 满足 于 对 现 有 功能 的 扩展 与 延伸 , 而 是 更 多 地 聚焦 于 对 编程 模型 的 简化 以 及 
在 Web UI (用 户 界 面 ) 设计 理念 和 方法 层面 的 革新 。 

在 CSS2.1 时 代 , 一 名 优秀 的 Web 设计 师 时 常 因为 需要 用 到 圆 角 、 阴 影 或 渐变 等 效 来 而 不 得 
不 在 用 户 体 验 和 页 面 性 能 之 间作 出 取舍 ， 而 一 名 优秀 的 Web 开发 者 则 需要 对 实现 这 些 效 末 所 需 
E p A Gh ae HAS 7 SIE AF hh), CSS3 的 出 现 并 没有 彻底 普 窗 这 一 切 ， 但 它 至 少 让 我 们 的 工作 
变 得 更 轻松 了 ， 同 时 也 让 页 面 拥有 了 更 加 丰 定 的 可 选 效 果 。 但 最 为 重要 的 是 ，CSS3 开始 采用 模 
块 化 的 管理 方式 ， 其 规范 被 划分 为 右 干 个 相互 独立 的 模块 : 一 方面 ， 较 小 的 模块 有 利于 规范 的 及 
时 发 布 与 更 新 ， 工 作 组 可 随时 根据 现实 状况 来 调整 标准 ， 另 一 方面 ， 由 于 CSS3 BEPESEBR T 19i 
的 支持 程度 ， 因 此 广 商 可 以 有 选择 地 支持 其 中 的 部 分 模块 ， 以 实现 对 CSS3 SER FRISCH. 3X 
终 将 有 利于 CSS3 的 普及 与 推广 ， 我 们 也 有 理由 相信 这 会 改变 CSS 支持 度 从 前 混乱 不 堪 的 局 面 。 
截至 本 书 出 版 之 时 ，CSS3 5 A856 SE te Bl AE nea Et HY SC FF 

在 了 解 这 些 情况 之 后 ， 我 们 和 古人 否 应 该 继续 拥抱 疝 未 成 熟 的 CSS3 技术 呢 ? 读 完 本 书 ， 你 就 能 
找到 答案 。 本 书 的 作者 佐 伊 ， 米 克 莉 ' 吉 伦 沃 特 是 一 名 优秀 的 Web 设计 师 ， 她 拥有 非常 丰富 的 
Web 设计 和 开发 经 验 。 在 本 书 中 ， 她 巧妙 地 将 目 身 经 验 与 CSS3 的 模块 划分 相 结合 ， 用 了 七 草 的 
篇 幅 尽 可 能 立体 地 前 述 了 CSS3 里 最 为 重要 的 技术 细 市 。 而 从 这 些 或 许 你 之 前 从 未 深 切 关注 过 的 
技术 细 市 之 中 ， 你 不 仅 可 以 感受 到 作者 严谨 的 治学 态度 ， 同 时 也 能 收获 不 少 对 Web 设计 、 开 发 
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工作 有 用 的 经 验 总 结 。 与 此 同时 , 你 还 可 以 从 本 书 中 了 解 到 为 何 我 们 需要 在 产品 中 立即 使 用 CSS3 
技术 ， 以 及 如 何 才 能 规避 CSS3 To BTA VUE V. SC FET RA TS Ing, EER ESSE 
发 思想 以 及 对 CSS3 特性 的 全 方位 实践 ， RE HELLE A E E A IEEE ASS i HE TK 
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本 书 的 翻译 工作 由 两 名 译 者 合作 完成 ， 其 中 周志 超 翻 译 了 第 1、3、7 革 ， 届 超 则 人 负 贡 完成 其 
余 的 部 分 。 两 位 译 者 在 这 里 特别 感谢 工作 团队 中 的 各 位 同事 ,没有 他 们 在 日 第 开发 中 的 经 验 总 结 ， 
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尤其 需要 致 以 诚挚 谢意 的 还 有 本 书 编辑 团队 中 的 传 志 红 和 李 盼 两 位 女士 , 没有 她 们 在 统筹 和 
编辑 工作 上 的 辛勤 付出 ， 本 书 绝 不 可 能 按期 完成 。 

最 后 ， 让 我 们 拥抱 未 来 ， 拥 抱 变 化 ， 拥 抱 CSS3， 让 本 书 为 你 打开 一 条 指向 未 来 Web FRH 
FANER. 

谢谢 ! 








( 书 中 脚注 如 无 特别 说 明 ， 均 为 译 者 注 。) 
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CSS3 是 最 新 版 的 Web 样式 表 语 言 ， 它 不 是 介绍 何 创造 新 颖 特效 的 ， 而 更 多 地 侧重 于 提供 一 
些 神奇 的 新 方法 来 实现 常见 而 优美 的 网 页 设计 效果 , 这 些 新 方法 比 十 年 来 惯用 的 传统 技术 更 为 高 
效 ， 而 且 能 够 获得 可 用 性 更 高 且 灵 活 的 结果 。 

CSS3 在 不 断 地 变化 和 发 展 之 中 ， 因 为 支持 CSS 的 浏览 器 在 发 展 ， 网 页 设计 师 对 它 的 认 知 程 
度 也 在 不 断 提升 。 它 可 以 用 来 创造 一 些 令 人 惊艳 的 酷 炫 特效 ， 本 书 将 一 一 予以 展现 。 要 是 这 些 特 
效 对 于 目前 的 网 站 不 具 实 用 性 , 那 著 书 意义 何在 ?因此 在 本 书 中 , 我 将 致力 于 教 给 你 那些 能 够 切 
实 改善 网 站 体验 ， 并 可 以 迅速 应 用 到 日 常 工作 中 的 CSS 前 沿 技巧 。 

本 书 并 非 CSS3 的 百科 全 书 或 参考 指南 ， 它 不 会 把 CSS2.1 后 新 增 的 属性 、 选 择 器 和 值 逐 个 
地 教 给 你 ， 而 是 通过 一 系列 务实 与 创新 的 项 目 来 为 你 讲解 CSS3 里 最 流行 、 实 用 和 最 常见 的 那些 
部 分 。 从 第 2 草 开 始 ， 每 一 草 都 会 让 你 从 儿 个 实例 计 练 中 接触 到 CSS3 的 新 技术 ， 并 最终 完成 一 
块 甚至 是 一 个 页 面 。 你 可 以 直接 将 这 些 实例 改写 成 自己 的 项 目 ， 或 是 从 中 获得 启发 ， 创 造 性 地 运 
用 你 学 到 的 其 他 新 属性 、 选 择 右 和 值 。 

从 某 种 程度 上 说 ，CSS3 不 仅 是 一 种 新 的 网 页 开发 方式 ， 它 同样 是 一 种 新 的 思考 方式 。 举 例 
来 讲 ， 如 何 应 用 border-image 这 个 新 增 属性 就 是 个 难题 ， 因 为 在 从 事 了 多 年 的 网 站 开发 之 后 ， 
你 恐怕 还 不 习惯 将 图 片 作 为 边框 设计 的 一 种 选项 来 考虑 。 因 此 ,我 整理 了 一 份 清单 ， 里面 罗 列 了 
如 何 应 用 每 一 项 CSS3 属性 、 选 择 器 和 值 的 方法 ， 这 些 方法 远 不 止 我 们 在 实例 演练 中 所 使 用 的 那 
一 种 。 我 希望 能 提供 足够 多 的 灵感 ， 让 你 知道 如 何在 项 目 中 实践 你 的 CSS3 技术 ， 并 辅 以 一 些 专 
业 技 巧 来 确保 你 可 以 高 效 自如 地 使 用 它 。 


本 书 的 读者 群 
本 书 是 写 给 那些 有 过 CSS 编写 经 验 ， 并 希望 使 自己 的 网 站 和 技术 更 上 一 层 楼 的 读者 。 我 候 
设 你 已 经 知晓 了 HTML 和 CSS 的 语法 和 相关 术语 ， 但 你 不 必 是 一 名 CSS 专家 ， 而 且 不 需 有 过 使 


用 CSS3 新 特性 的 经 历 。 无 论 你 是 刚 接触 CSS， 还 是 已 经 从 事 了 多 年 的 网 站 开发 工作 ， 这 本 书 都 
会 教 给 你 一 些 强大 的 新 技巧 ， 把 你 全 面 武 装 起 来 。 


实例 文件 


每 一 草 都 至 少 包 含 一 个 实例 注 练 ,使 你 有 机 会 在 真实 的 页 面 里 一 步 步 地 实践 技术 。 你 可 以 从 





NO 
= 
Bu 


本 书 的 官方 网 站 (www.stunningess3.com) 下 载 这 些 文件 来 配合 每 一 次 的 实例 演练 。 我 为 每 个 实例 
准备 了 至 少 两 种 文件 一 一 初始 版 和 完成 版 ， 还 为 一 些 篇 幅 较 长 的 实例 提供 了 中 间 步 又 的 版 本 ， 你 
可 以 定期 进行 对 比 来 确保 在 目 己 的 文件 上 执行 了 正确 的 修改 。 

你 可 以 用 任何 顺手 的 编辑 磺 来 处 理 这 些 实例 演练 的 文件 ， 编 写 CSS 无 需 特殊 的 工具 。 我 个 
人 使 用 Adobe Dreamweaver 的 代码 视图 (Code View) 来 手工 编写 CSS。, 如 果 你 也 使 用 Dreamweaver 
或 类 似 的 编辑 右 ， 我 推荐 你 选择 手工 编写 。 

尽管 已 经 花费 了 大 量 的 精力 检查 过 书 中 的 代码 , 但 难免 还 会 存在 一 些 错 误 。 请 通过 本 书 网 站 
上 的 电子 邮件 地 址 将 错误 报告 给 我 ， 如 有 必要 我 会 在 网 站 上 进行 提示 并 更 新 实例 演练 的 文件 。 


实用 链接 


每 一 草包 含 了 若干 个 实用 链接 ， 它 们 是 可 能 对 你 有 用 的 资源 、 文 草 、 教 程 、 工 具 和 实例 。 而 
且 直 接点 击 链 接 无 疑 比 你 费劲 对 照 书 本 去 输入 URL 要 来 得 方便 ， 于 是 我 也 将 每 章 的 实用 链接 沪 
总 到 了 www.stunningcss3.com E, 

CSS3 是 一 个 多 变 的 话题 ， 所 以 有 时 当 新 近 的 资源 证 现 出 来 时 我 会 更 新 这 些 链 接 列 表 。 你 可 
以 在 书 中 这 些 链接 处 发 现 提 示 ， 以 便 从 网 站 上 找到 最 新 的 信息 。 














书 中 的 实例 都 已 在 主流 训 览 红 的 最 新 版 本 上 进行 过 测试 。 本 书 编 握 之 时 ,这些 训 览 右 的 版 本 
分 别 是 Chrome 6, Firefox 3.6, IE 8, Opera 10.6 和 Safari 5。 这 些 实例 也 在 9 和 Firefox 4 的 beta 
版 上 进行 了 测试 ， 但 它们 在 最 终 发 行 版 上 的 效果 可 能 会 与 书 中 的 描述 存在 不 同 。 

xx esr op ég—156 23 50538) Ve BE FHRJIHDU SES (EbAn IE 78H IE 6). 上 也 做 了 测试 。 很 多 情况 
T, sper dill bi ar LAY CSS3 SiG Hi LEASE EF A V, a P) EAR BYE ACYESEA REL, Di 
面 也 依旧 可 以 工作 , 不 仅 能 用 ， 而 且 看 起 来 也 不 错 。 对 于 每 一 项 特性 ， 我 们 将 一 直 尽 可 能 地 去 寻 
求 变通 或 备用 方案 ,使 之 兼容 那些 不 被 原生 支持 的 广 贤 絮 。 

关于 具体 某 个 特性 被 哪些 鹿 贤 絮 支 持 , 我 在 每 一 革 里 将 所 介绍 的 每 个 属性 或 选择 絮 的 兼容 度 
整理 成 表 。 针 对 每 个 剂 览 右 给 定 (X o. UD2J  S& 8? o. AE RRA A a8 xA A TUTT 
A, EM es eSB DRI, s ESTO £x. (LEA ET ARE. 部 
oy” WIR SD bt as ASD AIGA A, te EEE RU Ee Bk ES AL AL Zh 

一 些 CSS3 属性 仅 当 含有 浑 染 引擎 的 前 缀 时 才能 生效 〈 第 1 章 你 就 将 学 习 这 些 包 含 前 绥 的 属 
PE), REA o as HEA eH AE A ES s PET Be EEE | Gas PS DAZ o 

AY T PERT SEA UA, as BERTI AAS SC HA ENR ASA ERATE, RCE A He BRE TRU hat 
Ig LFF RR C PET BE Be FE as RASS, ROR Ml bt at FE oe VE) LA AS A SEE T VAR Ee 
Peas» 而 且 使 用 不 支持 该 特性 的 版 本 的 那些 用 户 数 量 又 不 大 ,那么 我 则 不 会 在 兼容 表 中 标注 版 本 























中 本 书 翻译 期 间 ， 上 述 两 个 放 览 絮 均 已 发 布 正式 版 。 
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说 明 反 过 来 说 ， 当 某 个 属性 或 选择 器 最 早 被 支持 的 时 间 尤 其 值得 强调 时 ， 我 也 会 偶尔 标注 浏 
览 器 的 版 本 号 。 比 如 ，efont-face 早 在 IE4 时 代 就 被 支持 了 。 


本 书 约定 


本 书 使 用 了 一 些 约定 ， 有 必要 在 这 里 先 说 明 一 下 。 
口 W3C 表示 万 维 网 联盟 (World Wide Web Consortium) ， 它 是 一 个 制定 Web 官方 标准 和 规范 
(比如 CSS3) 的 组 织 。 
UO IE % Windows Internet Explorer 的 缩写 。 "IE 8 及 之 前 的 版 本 ”代表 了 正 8、 正 7 和 正 6。 
口 Webkit AA ill bias te Safari( 包 含 昌 面 和 移动 版 ) Chrome 和 其 他 使 用 近期 版 本 的 Webkit 
Di A eRe | BI Bh ae o 
O (VRS aE "PURUS xP A. ERR A BIT Ae) ZEHA bias, hot 
JEF TREES SC Pr S AY AEE BY HE UR FE TZ 9 REC AP AG I a o 
本 书 的 所 有 示例 都 以 HTMLS 标记 编写 。 但 这 仅仅 表示 我 使 用 了 短小 精 慢 的 HTMLS 文档 声 
HH<!DOCTYPE html>, WAE HEH meta €f dh. style 和 script 标签 。 我 并 没有 使 用 
任何 HTMLS 引入 的 新 标签 ， 如 section 和 article， 所 以 页 面 可 以 在 正 8 及 之 前 的 版 本 下 正 
第 运行 ， 但 你 可 以 在 自己 的 页 面 里 将 其 更 换 为 喜欢 的 标记 。 所 有 的 示例 也 同样 兼容 HTML 4.01 
fll XHTML 1, 
所 有 CSS 实例 代码 必须 置 于 一 个 外 部 样式 文件 之 中 ,或 是 HTML/XHTML 文档 的 head 标签 
中 。 为 了 方便 修改 ,， 这些 实例 文件 本 身 将 CSS 书写 在 了 页 面 的 head 标签 中 ,但 对 于 最 终 的 成 品 
最 好 还 是 将 其 转移 到 一 个 外 部 文件 里 。 
一 些 实例 代码 中 含有 一 些 被 加 粗 的 字符 和 行 ， 如 末 它 是 你 之 前 看 到 过 的 代码 片段 ， 则 说 明 这 
块 内 容 有 增 改 ;， 如果 是 一 段 新 的 代码 ， 则 表示 它 需 要 你 特别 注意 。 某 些 情况 下 ,你 会 在 某 行 代码 
之 前 看 到 一 个 -符号 ， 它 代表 这 行 代码 由 于 版 面 限制 被 强制 换行 了 ,但 这 并 不 意味 着 你 的 代码 也 
必须 在 那里 换行 
书 中 所 介绍 的 每 个 属性 或 选择 邵 都 有 一 个 题 为 “来 龙 去 脉 ”的 附注 栏 , 它 将 简 述 相关 的 语法 、 
行为 和 用 例 。 当 然 ， 其 中 不 可 能 包含 所 有 的 语法 细 证 ,但 一 些 最 根本 的 信息 还 是 值得 参考 的 。 此 
外 ， 附 注 栏 中 还 会 包含 定义 相应 属性 及 选择 器 的 CSS3 模块 的 站 点 链接 ， 便 于 你 在 想 了 解 完整 的 
MUN BF 
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CSS3 的 来 龙 去 脉 


在 使 用 CSS3 之 前 ， 你 应 该 对 它 的 来 龙 去 脉 有 个 基本 了解。 在 这 一 草 中 ， 你 将 知晓 CSS3 与 
CSS2.1 AUK BH, LAK zB bi ak et CSS3 的 文 持 情况 。 对 于 那些 尚未 完全 文 持 CSS3 AIAI bea , 
我 们 会 介绍 一 些 临 时 兼容 的 方案 和 模拟 实现 的 方法 。 你 也 会 了 解 到 即刻 在 项 目 中 使 用 CSS3 所 市 
来 的 各 种 实际 好 处 ， 包 括 可 以 用 来 说 服 多 疑 的 客户 或 老板 的 一 系列 理由 (这 可 是 实际 的 好 处 ， 别 
认为 它们 仅仅 只 是 些 理论 观点 )。 最 后 ， 我 们 还 会 介绍 如 何 使 用 CSS3 才能 符合 渐进 增强 的 设计 
原则 ， 并 讲解 一 些 最 佳 实践 ， 让 应 用 了 CSS3 的 项 目 尽 可 能 地 健壮 且 与 时 俱 进 。 





1.1 什么 是 CSS3 





CSS3 是 CSS2.1 的 扩展 ， 它 在 CSS2.1 的 基础 上 增加 了 很 多 强大 的 新 功能 ， 但 是 它 已 不 再 像 
CSS2.1 那样 是 单一 的 规范 。CSS3 被 划分 成 几 个 模块 , 每 个 模块 都 是 CSS 的 某 个 子 集 的 独立 规范 ， 
比如 选择 器 、 文 本 或 者 背景 。 每 个 模块 都 有 各 自 独立 的 创作 者 和 时间 表 。 这 样 做 的 好 处 是 整个 
CSS3 规范 的 发 布 不 再 需要 停 下 来 等 待 某 个 难产 的 小 条 目 一 一 这 个 模块 或 许 尚 需 等 待 ， 但 其 他 模 
块 的 流程 却 能 够 继续 向 前 推进 。 

在 www.w3.org/Style/CSS/current-work 这 个 网 页 里 , 你 可 以 看 到 一 份 包含 了 所 有 模块 的 列表 ， 
以 及 它们 目前 的 进度 离 最 终 发 布 还 有 多 远 。 稍 后 我 们 将 在 本 章 讨论 这 些 模块 的 当前 进度 , 现在 先 
来 看 看 CSS3 中 激动 人 心 的 新 特性 吧 ! 


1.1.1 新 特性 概览 


理所当然 ， 大 部 分 的 CSS3 规范 都 重复 了 CSS2.1 的 内 容 ， 但 也 在 它 的 基础 上 进行 了 很 多 增 
补 和 修订 。 下 面 列 出 来 的 变更 并 不 全 面 一 一 全 部 列 出 也 不 太 现 实 ， 因 此 我 们 只 罗列 了 从 CSS2.1 
到 CSS3 中 那些 支持 度 较 好 、 更 流行 且 更 实用 的 变更 。 

O 不 依赖 图 片 的 视 党 效果 。CSS3 包含 了 大 量 新 特性 ， 可 以 用 来 创建 一 些 以 前 只 能 通过 图 片 

(或 脚本 ) 才 实 现 的 视觉 效果 ， 比 如 圆 角 、 阴 影 、 半 透明 背景 、 渐 变 以 及 图 片 边框 等 。 在 
这 些 新 特性 之 中 ， 多 数 是 属于 “背景 和 边框 ”(Backgrounds and Borders) 模块 的 ， 其余 的 
则 属于 “色彩 和 图 像 ”(Colors and Image Values) 模块 。 我 们 将 在 第 2 章 中 介绍 这 些 特效 ， 
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O 盒 容 器 变形 。CSS3 中 还 有 一 类 视觉 效果 , 让 我 们 可 以 在 2D 或 者 3D 空间 里 操作 盒 容 器 的 
位 置 和 形状 , 比如 旋转 、 缩 放 或 者 移动 。 这些 特 效 称 为 变形 , (E "2D 变形 (2D Transforms) 
和 “3D 变形 ”(3D Transforms) 模块 中 都 有 涉及 。 你 将 在 第 2 章 中 了 解 变形 特效 。 

O 独一无二 的 字体 。 “FE” (Font) 模块 引入 了 efont-face 规则 ， 让 你 能 够 引入 一 个 存放 
于 服务 强 的 字体 文件 ， 并 使 用 该 字体 来 显示 页 面 中 的 文本 ， 这 就 突破 了 以 往 只 能 使 用 用 
户 机 器 上 的 字体 的 限制 ， 也 使 得 页 面 能 呈现 出 更 漂亮 的 页 面 。 你 将 在 第 3 章 详细 了 解 
@font-face, 

O 强大 的 选择 器 。CSS3 新 增 了 十 多 个 选择 器 ， 大 部 分 是 伪 类 和 属性 选择 器 。 你 可 用 它们 选 
取 HTML 结构 中 的 特定 片段 而 无 需 增 加 特定 的 ID 或 类 , 从 而 精简 代码 并 使 之 更 加 不 易 出 
错 。 这 些 选 择 红 都 描述 在 “选择 右 ”(〈Selectors) 模块 里 ， 在 第 4 章 和 第 5 章 我 会 详细 地 
介绍 它们 。 

a 过 渡 与 动画 。CSS3 的 过 渡 (transition) 在 其 同名 的 模块 里 描述 。 它 是 一 种 简单 的 动画 特 
效 ， 可 以 平缓 地 呈现 一 个 元 素 的 样式 变化 。 例 如 ， 当 用 户 将 鼠标 二 停 于 按钮 之 上 时 渐进 
且 平 请 地 改变 其 颜色 。 更 复杂 的 CSS3“ 动 画 ”(animation) 特性 也 在 其 同名 的 模块 里 有 
相应 摘 述 ， 它 能 够 实现 更 复杂 的 样式 变化 和 元 素 位 移 ， 而 不 需要 用 到 Flash 或 JavaScript, 
我 们 会 在 第 5 革 讨 论 过 渡 与 动画 。 

a 媒体 信息 查询 。“ 媒 体 信息 查询 ”(Media Queries) 模块 介绍 了 如 何 根据 用 户 的 显示 终端 或 
设备 特征 来 提供 样式 ， 这 些 特征 包括 屏幕 的 可 视 区 域 宽 度 、 分 辩 率 以 及 可 显示 的 色彩 数 
等 。 媒 体 信 息 碍 询 是 一 款 非常 棒 的 专门 针对 移动 设备 来 实现 优化 的 工具 。 你 将 在 第 6 半 
了 解 到 它 的 相关 信息 。 

口 多 列 布局 。CSS3 引入 了 几 个 新 模块 来 帮助 我 们 更 方便 地 创建 多 列 布局 。“ 多 列 布局 ” 
(Multi-column Layout) 模块 描述 了 如 何 像 报 纸 布局 那样 把 一 个 简单 的 区 块 拆 分 成 多 列 ， 我 
们 将 在 第 6 昔 对 它 进行 讲解 。 而 “弹性 盒 容器 布局 ”(Flexible Box Layout) 模块 则 能 够 让 
区 块 在 水 平 或 垂直 方向 上 保持 对 齐 ， 相 对 于 浮动 布局 或 绝对 定位 布局 来 说 它 显 得 更 为 灵 
活 。 此 外 还 有 “模板 布局 (Template Layout) 和 “网 格 定位 ”〈Grid Positioning) 的 实验 
性 布局 模块 ， 我 们 将 在 第 7 章 讨 论 后 面 3 种 布局 系统 。 


























1.1.2 CSS3 的 当前 进展 


我 已 经 能 想象 到 你 要 问 : 这 些 相当 酷 的 新 特性 何 时 才能 最 终 发 布 呢 ”正如 我 在 之 前 的 章 证 里 
所 提 到 的 一 一 每 个 模块 都 有 它 自己 的 时 间 表 ， 你 可 以 到 www.w3.org/Style/CSS/current-work 网 站 
了 解 其 进展 (图 1-1)。 这 张 表格 上 所 列 出 的 状态 ,通常 被 称 为 成 熟 级 别 ， 有 了 时候 W3C 也 称 其 为 
稳定 级 别 ， 这 些 模块 的 当前 版 本 及 下 个 版 本 的 状态 都 已 链接 到 对 应 的 文档 。 
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High Priority 

CSS Level 2 Revision | 
Selectors 

CSS Mobile Profile 2.0 





CSS Marquee 

Medium Priority 

CSS Snapshot 2007 

CSS Namespaces 

CSS P: Media 

CSS Print Profile 

CSS Values and Units 

CSS Cascading and Inheritance 

CSS Text 

CSS Text Layout 

CSS Line Grid 

CSS Ruby 

CSS Generated Content for Paged Media 
CSS Backgrounds and Borders Level 3 
CSS Fonts 

CSS Basic Box Model 

CSS Multi-column Layout 

CSS Template Layout 


CSS Basic User Interface 
CSS Scoping 


CSS Grid Positioning 
CSS Flexible Box Layout 
CSS Image Values 

CSS 2D Transformations 
CSS 3D Transformations 





CSS Reader Media Type 

CSS Positioning 

CSS Generated and Replaced Content 
CSS Line Layout 

CSS Hyperlink Presentation 
CSS style Attribute Syntax 
CSS Math 

CSS Presentation Levels 

CSS Aural Style Sheets 

CSS TV Profile 1.0 
Behavioral Extensions to CSS 
CSS Introduction 











图 1-1 CSS3 当前 所 有 的 模块 及 其 状态 


W3C 所 使 用 的 级 别 ， 从 低 至 高 依次 如 下 所 示 。 

(1) 工作 草案 (Working Draft)。 这 是 最 早 的 可 公开 版 本 ， 发 布 的 目的 是 为 了 能 从 社区 征集 更 
多 的 意见 ， 一 个 模块 或 规 疙 可 能 会 历经 若干 个 工作 日 案 。 

(2) 最 终 公 示 (Last Call), 。 它 相当 于 带 有 最 后 评述 期 限 的 工作 草案 。 这 表明 工作 组 认为 该 模 
块 已 经 实现 了 既定 功能 尽管 通 和 常 在 此 之 后 还 会 发 生 一 些 重要 的 变更 , 而 且 它 极 有 可 能 正人 准备 
开始 进入 下 一 个 阶段 了 。 

(3) 候选 推荐 标准 (Candidate Recommendation)。 工 作 组 认定 该 模块 已 经 稳定 并 符合 使 用 需求 
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了 ,浏览 器 应 该 可 以 着 手 实现 本 模块 了 ;而 为 了 了 解 如 何 部 署 该 模块 ，Web 开发 者 也 可 以 在 日 常 
开发 中 使 用 这 些 特性 了 。 浏 览 器 在 实现 这 些 特性 时 可 以 带 上 各 自 的 私有 前 绥 。 在 这 之 后 规范 仍 有 
可 能 发 生变 更 ， 但 不 会 很 频繁 或 很 重要 。 

(4) 提名 推荐 标准 (Proposed Recommendation) 。 这 将 会 是 非常 成 熟 且 经 过 认真 审核 过 的 文档 ， 
它 将 被 提交 到 W3C 顾问 委员 会 做 最 后 的 批注 。 在 这 之 后 鲜 有 变更 。 

(5) 推荐 标准 (Recommendation) 。 这 是 最 终 的 完整 版 本 ， 即 我 们 通常 所 指 的 “标准 ”。 

Web 开发 者 显然 很 希望 在 W3C 规范 完成 之 前 就 可 以 使 用 这 些 新 特性 ， 而 事实 上， 他们 也 期 
待 我 们 这 样 去 做 。 如 果 你 认真 查看 了 W3C 网 站 上 的 列表 (如 图 1-1 所 示 ) ， 就 会 注意 到 在 本 书 摆 
写 之 时 仅仅 只 有 “SVG” 模 块 〈 它 在 列表 靠近 底部 的 位 置 ) 是 处 于 “推荐 标准 ”状态 的 。 即 便 是 
我 们 已 经 使 用 了 很 多 年 的 CSS2.1， 目 前 还 依然 处 于 “候选 推荐 标准 ”的 状态 ， 甚 至 尚 不 属于 “ 提 
名 推荐 标准 ?。 因 此， 即使 CSS3 还 不 是 一 个 最 终 的 标准 ， 我 们 还 是 可 以 大 量 地 使 用 它 。 

1.1.3 ”现在 就 开始 使 用 CSS3 

有 几 个 CSS3 规范 模块 目前 已 处 于 “候选 推荐 ”状态 了 ， 这 说 明 它 们 已 经 完全 可 以 正常 使 用 
了 。 即 便 是 尚 处 于 “工作 草案 状态 ”的 某 些 特性 ,我 们 也 可 以 去 用 一 用 。 虽 然 还 需要 等 待 某 些 沿 
在 变化 中 或 支持 度 不 足 的 属性 和 特性 变 得 更 稳定 些 ， 但 在 合适 的 情形 下 ， 我 们 不 妨 去 使 用 CSS3 
里 那些 支持 度 较 好 且 相 对 稳定 的 部 分 。 

只 有 将 新 的 CSS 技术 运用 到 实际 工作 中 ， 我 们 才能 够 发 现 应 用 这 些 技术 所 面临 的 真正 挑战 ， 
以 便 帮助 W3C 来 应 对 它们 。 在 真实 环境 下 使 用 新 的 CSS 技术 , 能 够 帮助 Web 开发 社区 发 现 其 缺 
点 、 差 异 以 及 规范 中 的 漏洞 ， 而 且 能 够 引入 一 些 关 于 改进 、 扩 充 和 阐明 规范 的 新 思想 。 当 我 们 还 
有 机 会 改变 CSS3 规范 的 时 候 ， 可 以 通过 测试 来 帮助 它 变 得 更 好 ， 所 以 请 不 要 坐等 标准 的 最 终 确 
立 而 错失 良机 。 

实际 应 用 这 些 从 某 种 意义 上 说 尚 处 在 最 前 沿 的 技术 也 能 够 告诉 浏览 器 制造 商 : 对 于 Web JF 
发 者 来 说 ， 哪 些 CSS3 特性 最 流行 且 最 实用 。 这 也 能 促使 浏览 器 制造 商 更 好 地 支持 这 类 新 特性 。 

因此 ， 尽 早 地 使 用 新 的 CSS 特性 能 够 有 效 促使 它们 成 为 真正 的 标准 。 如 果 它 们 从 未 被 使 用 
过 ， 那 么 永远 也 不 可 能 被 最 终 确 立 。 

我 并 不 是 说 W3C 网 站 的 那个 列表 上 的 所 有 内 容 都 能 马上 投入 使 用 。 并 不 是 所 有 的 新 特性 和 
技术 都 能 够 立即 开始 使 用 ， 或 是 被 应 用 到 所 有 的 项 目 里 。 你 应 该 只 使 用 那些 相对 稳定 的 CSS3 特 
性 ， 并 确保 不 会 对 那些 尚 不 支持 这 些 特性 的 浏览 器 造成 影响 。 明 智 地 使 用 它们 ! 不 要 仅仅 是 因为 
能 使 用 这 些 特性 就 无 限制 地 滥用， 要 看 看 这 些 特性 是 否 符合 网 站 的 目标 ， 以 及 是 否 对 用 户 有 益 ， 
然后 才 在 适当 的 地 方 使 用 它们 。 

有 些 CSS3 特性 还 没有 达到 “候选 推荐 标准 ”的 级 别 ， 但 是 它们 的 语法 已 经 十 分 稳定 ， 在 很 
长 一 段 时 间 之 内 都 没有 变化 ， 而 且 未 来 也 不 太 可 能 发 生变 更 。 但 遗憾 的 是 ， 单 从 W3C 的 网 站 来 
看 ， 你 无 法 知晓 哪些 特性 符合 这 个 条 件 ， 因 此 必须 依赖 其 他 文章 或 者 书籍 来 确定 其 个 特性 的 历史 
和 稳定 程度 。 在 本 书 中 ， 我 们 将 接触 到 几乎 所 有 稳定 且 适 合 使 用 的 CSS3 特性 ， 而 极 少 数 情况 下 
当 深 入 使 用 更 具 试 验 性 质 的 特性 时 ， 书 中 会 了 予以 提示 。 
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1.2 ”浏览 器 的 支持 状况 


另 一 个 值得 考虑 的 问题 是 , 通 毅 我 们 需要 知道 各 大 主流 训 览 磺 或 某 类 特定 用 户 所 使 用 的 说 览 
aX Ae CSS3 特性 的 文 持 程度 如 何 。 有 了 时候 花 了 时 间 去 增加 一 段 还 在 实验 阶段 且 支 持 度 不 佳 的 
CSS 一 一 比如 说 为 某 个 特定 的 训 览 合 增 加 了 一 个 小 “彩蛋 ， 却 只 能 被 一 小 部 分 用 户 欣 贯 到 ， 那 
么 这 样 的 工作 通 闻 并 没有 什么 实际 意义 。 

然而 为 了 知道 你 的 大 部 分 用 户 能 够 体验 到 哪些 CSS3 的 新 特性 ， 就 必须 了 解 当 前 训 览 各 对 这 
些 特性 的 支持 程度 。 


1.2.1 浏览 器 市 场 份额 


训 览 霹 的 使 用 率 始终 在 变化 而 且 难 以 精确 车 握 ， 图 1-2 显示 了 2010 年 10 HEKA ba RJ TH 
场 份 额 。 这 些 图 表 根 据 Net Applications 的 可 信和 度 高 且 样 本 广泛 的 统计 结 末 绘 制 而 成 (http:// 
marketshare.hitslink.com/browser-market-share.aspx?qprid-0) 。 如 果 想 了 解 其 他 来 源 的 统计 结果 ， 
可 以 访问 维基 百科 的 “Usage share of web browsers" 页 面 ? (http://en.wikipedia.org/wiki/ 


Usage share of web browsers), 





Pe IE8 (32%) > Firefox 3.5 (3%) 
BY> Firefox 3.6 (18%) Safari 5 (3%) 
p» IE6 (16%) BY> Chrome 7 (2%) 
> IE7 (10%) Opera 10.x (2%) 
2» Chrome 6 (6%) > 其 他 (8%) 


1-2 2010 年 10 月 的 浏览 器 使 用 率 ( 另 见 彩 插 图 1-2) 


@ 该 词 条 在 维基 中 有 中 文 版 “网 页 剖 览 右 的 使 用 分 布 ， 可 从 英文 页 面 中 进行 切换 。 
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请 注意 IE 6 的 市 场 份 额 已 经 变 得 相当 小 了 ”( 此 结论 相对 于 它 在 2006 年 年 初 达到 顶峰 时 的 
份额 来 看 ， 当 时 为 85%， 而 且 IE5.x 版 本 也 占据 了 5%)， 但 它 也 不 能 被 完全 忽视 ， 日 前 Firefox 
3.6 的 用 户 数 仅 略 多 于 IE 6。 如 果 把 其 他 版 本 的 Firefox, Chrome, Safari 和 Opera 加 在 一 起 计算 
Whe, IE 6 的 市 场 份 额 确 实 已 经 远 远 少 于 这 些 符合 标准 的 现代 浏 贤 上 颖 。 通 常 ， 当 某 人 在 博客 上 
展示 一 个 很 酷 的 CSS 技巧 的 时 候 ， 我 们 首先 会 想到 的 问题 是 :“ 它 在 TE 6 上 看 起 来 咋 样 ? ” 然 
而 现在 ， 根 据 当 前 的 浏览 絮 使 用 率 统计 结果 ， 是 不 是 询问 “ 它 在 Firefox 上 看 起 来 咋 样 ”显得 更 
有 意义 呢 ? 

这 并 不 意味 着 你 可 以 忽略 针对 IE 6 的 测试 , 或 是 干脆 禁止 这 类 用 户 访 问 你 的 网 站 。 网 站 的 内 
容 始 终 应 该 在 任何 鹿 贤 如 上 都 古 可 用 的 ， 制 作 一 个 令 人 满意 的 Web 页 面 并 让 它 在 IE 6 上 易于 使 
用 并 不 是 一 件 很 难 的 事情 ,但 是 为 了 一 个 逐 凌 消失 的 用 户 群 体 花 费 大 量 时 间 和 精力 确实 是 越 来 越 
无 用 了 ， 除 非 你 的 目标 用 户 群 很 多 仍 在 使 用 该 浏览 器 。 正 如 我 先前 所 言 ，CSS3 对 你 的 网 站 到 底 
意义 几何 ， 是 由 你 的 项 目 和 用 户 所 决定 的 ， 而 不 是 这 个 大 致 的 训 览 右 使 用 率 统计 结果 。 

但 是 ， 除 非 你 的 网 站 统计 结果 与 这 个 结果 的 出 入 很 大 ， 否 则 就 不 该 继续 认为 非 IE FH IP DUX. 
是 个 不 需要 被 特别 关注 的 边缘 化 群体 。 花 费 在 非 IE vu Sa ss EAST IRI 4E SE IE 6/7 上 的 时 间 同 
样 重要 。 读 过 本 书 , 你 会 发 现 使 用 CSS3 可 以 很 容易 地 让 网 站 在 非 正 浏览 器 下 看 起 来 更 棒 
数 情况 下 甚至 对 IE 也 适用 。 


1.2.2 主流 浏览 器 支持 状况 


羊 运 的 征 ， 大 部 分 我 们 想 要 使 用 的 CSS3 特性 都 已 经 有 了 很 好 的 六 蜗 带 文 持 度 。 在 讲解 每 一 
个 CSS3 属性 、 特 性 或 选择 帮 时 ， 我 都 会 扣 及 相应 的 放 咒 带 支 持 度 ， 但 一 份 总 的 广 览 如 文 持 度 概 
TAA SRA. PRA ll SE ds CSS3 新 特性 的 总 体 文 持 程 度 做 一 个 评级 。 

















少 





说 明 浏览 器 支持 度 信息 见 附录 。 


口 Safari5、Safari for iOS4 和 Chrome 5: B+, 2 Safari 和 Chrome 是 不 同 的 浏览 器 ， 演 
Zw CSS3 属性 所 用 的 方法 也 不 尽 相 同 ， 但 是 它们 都 使 用 相同 的 Webkit fe 925/82, HHX 
CSS3 的 支持 程度 也 几乎 一 致 。 它 们 支持 大 部 分 的 CSS3 BRE, EEEE HL fou ta as Pr 
不 支持 的 “动画 ”特性 。Safari 5 是 唯一 支持 “3D I” Wie. EIEN a eee 
“ 半 变 ”特性 的 语法 是 非 标 准 的 ， 而 “多 列 布局 ”和 “弹性 盒 容 如 布局 ”模块 的 实现 也 是 
不 完整 旦 存在 缺陷 的 。 它 们 同样 不 支持 “模板 布局 和 “网 格 定位 ”的 模块 ， 但 目前 也 
E B dil Va, zi HE GEI X — R3, e 

D Safari 4, Safari foriOS3: B, iOS 是 Apple 的 移动 操作 系统 , 在 iPad, IH iPhone 和 iPod 
Touch 以 及 尚未 更 新 系统 的 新 版 iPhone 和 iPod Touch. 上 运行 的 是 它 的 第 3 版 。iOS3 里 的 


O 文中 数据 代表 全 球 冰 围 。 据 各 大 互联 网 企业 的 统计 ，IE 6 至 今 仍 占据 国内 六 览 合 市 场 的 半壁 江山 。 
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Safari 与 桌面 版 Safari 4 的 功能 基本 一 致 。Safari4 和 Safari 对 CSS3 的 支持 度 基本 处 于 同 
一 个 级 别 ， 只 是 不 支持 “3D 变形 ”， 另 外 还 有 一 些 属 性 存在 细微 的 语法 问题 。 

口 Firefox 4: B+。 除 了 不 支持 “动画 ”和 “3D 变形 ”之 外 ，Firefox 4 的 支持 度 与 Safari 5 
几 近 相同 ， 但 它 用 更 符合 标准 的 “ 剖 变 ”语法 、 更 好 的 “多 列 布局 ”模块 的 实现 以 及 独 
家 支持 的 “calc 国 数 ”弥补 了 “不 足 ”。 然 而 它 对 “ 阐 性 盒 容 龙 布 局 ”模块 的 实现 同样 

不 完整 且 存 在 缺陷 。 
口 Firefox 3.6: B, Firefox 3.6 的 支持 度 和 Firefox 4 大 体 一 八 ， 但 不 支持 “过 流 ” 和 “calc 
ERU, 

O Opera 10.6: B, Opera 10.6 能 够 支持 Firefox 3.6 所 能 支持 的 绝 大 部 分 特性 ， 除 了 “渐变 ” 
和 “弹性 盒 容 絮 布 局 。 但 它 支 持 “ 过 渡 ”"， 这 是 Firefox 3.6 所 不 支持 的 。 

ū Opera 10.5、Opera Mobile 10.1: B-, Opera Mobile 10 对 应 于 时 面 版 的 10.5， 它 们 的 支 
持 度 与 Opera 10.6 总 体 一 致 ， 但 在 一 些 属性 上 缺陷 略 多 。 

O IE9: C+。 在 本 书 完 稿 之 时 TE 9 尚 处 于 beta 阶段 ， 它 大 概 只 支持 其 他 主流 浏览 右 所 支持 
的 特性 的 一 半 。 其 优点 是 对 所 支持 的 特性 实现 度 非常 好 ， 且 不 需要 使 用 久 览 辟 前 绥 CH 
后 在 本 章 你 将 会 了 解 到 广 览 器 前 组 的 相关 内 容 )。 

DIE8、IE7 和 IE6: D-。 不 用 说 ， 由 于 这 些 训 览 右 都 发 布 于 CSS3 完善 发 展 之 前 ， 因 此 它 
们 几乎 完全 不 支持 CSS3。 然 而 它们 全 都 支持 efont-face JU word-wrap 特性 ,其 中 I 下 7 
和 IE 8 还 支持 CSS3 的 属性 选择 大 。 除 此 之 外 下 8 还 支持 box-sizing, 











其 他 浏览 器 支持 信息 资源 


在 本 书 中 我 会 提供 很 多 详细 的 浏览 器 支持 度 信息 , 但 CSS3 的 浏览 器 支持 度 一 直 在 持续 变 
化 之 中 。 本 书 无 意 成 为 关于 CSS3 属性 、 值 、 咏 数 、 规 则 和 选择 器 的 百科 全 书 ， 所 以 你 可 能 需 
要 到 其 他 地 方 查阅 CSS3 某 个 特性 的 浏览 器 支持 度 。 
Mozilla, Opera 和 Safari 为 它们 所 支持 的 特性 维护 着 非常 实用 的 列表 : 
Q https://developer.mozilla.org/en/Mozilla CSS support chart 
Q http://www.opera.com/docs/specs 
Q http://developer.apple.com/safari/library/documentation/ AppleApplications/Reference/Safar 
iCSSRef 
其 他 关于 浏览 器 支持 度 的 网 站 如 下 所 示 。 
口 维基 百科 的 “Comparison of layout engines (Cascading Style Sheets) ?" (http://en. wikipedia. 
org/wiki/Comparison of layout engines (CSS)) J|: 42 4& f doth 9p 28 8 ARA d mA 
实 的 内 容 。 


O 本 书 的 译 稿 完 成 之 时 ，IE 9 已 经 发 布 了 正式 版 本 ， 对 CSS3 特性 有 了 非常 好 的 支持 。 
Q iid REE ACh “Ul bias 51S CSS 支持 比较 ， 可 从 英文 页 面 中 进行 切换 。 
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口 FindMeByIP (www.findmebyip.com/litmus) 整理 了 许多 浏览 器 对 一 些 主要 的 CSS3 属性 
和 选择 器 的 支持 情况 ， 此 外 也 包括 HTMLS 的 特性 。 

口 “When can I use...” (http://caniuse.com/#cats=CSS3) 列举 了 五 大 浏览 器 在 当前 、 过 去 
以 及 未 来 版 本 中 对 若干 个 广 受 欢迎 的 CSS3 属性 和 特性 的 支持 度 信息 。 

口 Standardista (www.standardista.com/css3) 目前 包含 了 对 borders, backgrounds, 
columns, @font-face 和 选择 器 等 特性 的 详细 支持 图 表 。 更 多 模块 将 被 定期 添加 进去 。 

QO QuirksMode 在 “CSS contents and browser compatibility” (CSS 内 容 和 浏览 器 的 兼容 性 ) 
页 面 (www.quirksmode.org/css/contents.html) 里 罗列 了 各 种 CSS3 和 CSS2.1 选 择 器 和 
属性 的 支持 度 信 息 ， 其 中 每 一 条 都 有 独立 页 面 来 详细 地 介绍 它 的 工作 原理 ， 而 实际 上 
浏览 器 又 是 如 何 去 处 理 它 的 。 

O CSS Infos 维护 着 一 张 -moz- 和 -webkit- 的 私有 属性 列表 ， 它 展示 了 每 个 属性 诞生 时 
的 浏览 器 版 本 。 请 参阅 http://css-infos.net/properties/firefox.php 和 http://css-infos.net/ 
properties/webkit.php, 

Q Campaign Monitor J| 3 9& f —49 & T epee P3 CSS 的 支持 度 指 南 ， 其 中 也 和 包含 
CSS3 的 属性 ， 这 样 一 来 你 就 能 知道 在 HTML 格式 的 电子 邮件 时 事 通讯 里 什么 可 用 什 


么 不 可 用 了 。 请 参阅 : www.campaignmonitor.com/css , 





这 些 级 别 各 异 的 训 览 问 文 持 度 意 味 着 你 的 页 面 在 不 同 的 剖 览 疹 中 可 能 看 起 来 不 太一 样 。 这 疫 
ft^. 而且 坦白 讲 ， 无 论 你 是 否 使 用 CSS3， 这 种 情况 邦 将 不 可 避免 地 存在 。 因 为 终 咽 媒体 天 生 
就 具备 用 户 可 控 的 性 质 ， 所 以 Web 页 面 从 来 都 无 法 保证 在 任何 地 方 都 表现 一 致 。 而 且 在 如 今 这 
个 时 代 ， 设 备 、 屏 幕 、 训 览 侣 的 形态 越 来 越 丰 军 ， 人 们 的 惯用 设置 也 不 尽 相 同 ， 因 此 想 要 创造 一 
个 在 任何 地 方 都 表现 一 致 的 页 面 就 更 加 不 可 能 

只 要 你 关注 于 癌 所 有 人 提供 实用 且 多 用 的 页 面 ,那么 表现 上 的 差异 束 没 那么 重要 。 而 这 束 征 
“ 源 进 增强 ”哲学 的 思想 所 在 。 


1.3 渐进 增强 


渐进 增强 (Progressive Enhancement) 是 这 样 一 种 开发 方式 : 在 你 编写 Web 页 面 时 ， 首 先 让 
它们 在 基础 的 训 览 左 和 设备 上 正 篆 工作 且 展 现 得 当 ， 然 后 再 辅 以 更 高 级 但 非 必要 的 CSS 和 
JavaScript 等 增强 功能 ， 来 为 当前 和 未 来 的 训 览 严 提 供 更 好 的 支持 。 举 例 来 说 ， 你 可 以 用 朴素 但 
语义 化 的 HTML 构建 一 个 表单 ， 即 使 没有 样式 它 也 能 得 到 民 好 的 展现 ,禁用 JavaScript 后 它 也 可 
以 正常 工作 ; 随后 你 可 以 用 CSS 来 丰富 其 外 观 ， 再 使 用 JavaScript 增加 客户 端 层面 的 验证 。 我 们 
的 目标 是 ,利用 现代 训 览 右 的 优势 特性 ,在 确保 网 站 能 适用 于 每 个 用 户 的 同时 去 创造 尽 可 能 丰富 
的 体验 。 Designing with Progressive Enhancement" (http://www.filamentgroup. com/dwpe/) 一 书 对 
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此 有 很 好 的 总 结 : 
渐进 增强 …… 其 目标 是 向 尽 可 能 广泛 的 受众 提供 尽 可 能 优质 的 体验 . 跟 用 户 访问 网 
站 所 采用 万 式 无 关 ， 无 论 是 通过 iPhone, Biatan AA., Kindle, LARA Z, wi] 
所 能 得 到 的 体验 应 该 尽 可 能 的 独特 且 完 备 。 


1.3.1 RA 


虽然 “ 回 尽 可 能 广泛 的 受众 提供 尽 可 能 优质 的 体验 ”这 一 伟大 目标 听 起 来 相当 不 错 ， 但 其 实 
不 使 用 次 进 增强 技术 你 也 可 以 实现 它 , 比如 为 旧式 齐 贤 副 提 供 一 套 兼 容 方案 来 确保 页 面 与 其 在 新 
式 族 蜗 絮 下 的 表现 和 行为 尽量 保持 一 致 , 但 这 通常 并 不 是 明 管 的 选择 。 改 用 潜 进 增强 技术 能 够 让 
网站 的 视觉 丰富 程度 随 着 训 览 合 的 现代 化 发 展 而 不 断 提 升 ， 用 户 和 你 都 能 从 中 受益 。 











优雅 降级 

你 或 许 对 优雅 降级 (Graceful Degradation) 这 个 术语 非常 熟悉 ， 并 且 认 为 它 与 渐进 增强 有 
着 相同 的 含义 。 但 实际 上 它们 是 两 种 完全 相反 的 处 理 方式 ,， 尽管 通常 会 带 来 同样 的 效果 。 使 用 
优雅 降级 技术 时 ,你 必须 首先 完整 地 实现 了 网 站 ,其 中 包括 所 有 的 功能 和 效果 。 然 后 你 再 为 那 
些 无 法 支持 所 有 功能 的 浏览 器 增加 候选 方案 ,使 之 在 旧式 浏览 器 上 以 某 种 形式 降级 体验 却 不 至 

55 A AK, 

而 使 用 渐进 增强 时 ， 无 需 为 了 让 一 个 已 成 型 的 网 站 在 旧式 浏览 器 下 正常 工作 而 做 北向 工 
程 。 首 先 ， 只 需要 为 所 有 的 设备 和 浏览 器 准备 好 清晰 且 语 义 化 的 HTML 以 及 完善 的 内 容 ， 然 
后 再 以 无 侵入 (unobtrusive) 的 方式 向 页 面 增加 无 害 于 基础 浏览 器 的 额外 样式 和 功能 。 当 浏览 
器 升级 时 ,它们 会 自动 地 呈现 出 来 并 发 挥 功用 。 本 书 示例 中 有 渐进 增强 技术 的 诸多 实践 ， 每 个 
示例 页 面 首先 都 能 正 第 地 显示 并 工作 ， 然 后 再 通过 CSS3 使 之 得 到 增强 。 


Hc. 79 T YESCPERCBHICBS DU SE as M, BE S DUIH IRR ACR IUS ZH Hack, FRAT Se. BE 
脚本 或 其 他 技术 将 会 耗费 大 量 的 人 力 和 时 间 。 即 使 最 终 你 〈 在 所 能 测试 的 有 限 数量 的 用 户 环 
境 之 下 ) 实现 了 近乎 一 致 的 表现 ， 但 问题 是 用 户 真正 收获 了 什么 ? 与 其 试图 让 IE Ake HELL 
RETA A Na. BANS DOH GA ARE, Boe we TESA APE MIN, Boe Ds 
实现 其 他 真正 可 以 帮 到 用 户 的 改进 工作 ， 而 不 仅仅 古 让 页 面 看 起 来 “更 舰 一 点 ”。 

除 此 之 外 ， 如 我 之 前 所 言 : 想 让 网 站 在 任何 环境 下 看 起 来 部 保持 一 致 古 不 可 能 的 ， 不 省 为 
此 付出 多 少 努 力 ， 结 局 依旧 会 令 你 失望 。 因 此 ， 如 霖 网 站 无 论 如 何 痢 看 起 来 不 同 ， 那 么 为 什么 
不 用 CSS3 ERRE CEIAU R ar EAREN MENE? EE CSS3 特性 在 不 文 持 它 的 阐 贤 
妖 中 简直 古 “ 无 法 模拟 实现 ”的 ， 但 硅 使 用 半 进 增强 ， 就 无 需 为 了 能 让 你 的 网 站 适合 所 有 人 而 
放弃 这 些 技术 。 仪 仅 因 为 部 分 人 不 愿 或 不 能 升级 议 览 田 ， 却 让 使 用 新 型 麟 览 带 的 用 户 无 法 享受 
CSS3 所 提供 的 伟大 技术 ， 这 十 这 无 道理 可 言 的 。 我 们 应 该 先 让 网 站 能 够 正 肖 工作 于 尽 可 能 旧 
的 浏 览 合 上， 然后 不 断 为 它 在 新 型 训 览 右上 实现 更 多 的 增强 和 改进 。 这 个 方法 可 让 每 个 用 户 都 
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得 到 对 他 来 说 最 好 的 体验 。 随 着 时 间 的 推移 ， 当 越 来 越 多 的 人 开始 升级 剂 览 副 而 麟 览 如 本 里 的 
支持 度 也 不 断 提 升 时 ， 就 会 有 越 来 越 多 的 人 体验 到 这 些 增强 和 改进 ， 它 持续 有 效 地 使 网 站 越 来 
越 好 ， 却 无 需 你 刻 半 做 什么 。 只 需要 一 次 实现 ， 它 就 让 网 站 的 体验 与 时 俱 进 。 

大 部 分 人 可 能 永远 都 不 知道 你 的 网 站 在 不 同 的 齐 贤 谷 和 议 备 上 看 起 来 并 不 相同 , 因为 普通 人 
并 不 会 像 我 们 这 群 “偏执 ”的 Web 设计 师 一 样 使 用 多 个 训 览 右 来 对 比 设计 的 细 区 差异 。 即 使 他 
们 会 使 用 不 同 浏 览 絮 来 访问 你 的 网 站 ,只 要 这 些 差异 不 会 影响 网 站 的 易 用 性 (如 果 你 处 理 得 当 的 
Wh), ， 他 们 也 不 会 对 此 有 什么 特别 的 想法 。 说 到 后， 假如 有 人 上 班 时 使 用 IE 8， 回 家 后 使 用 笔记 
本 上 的 Chrome, 在 iPhone 上 使 用 Safari, 并 且 在 Wi 上 使 用 Opera 来 访问 你 的 网 站 , 我 想 他 终究 
会 习惯 所 有 这 些 不 同 设备 上 的 不 同 表 现 。 


1.3.2 “让 我 来 打 个 比方 ……” 


REDRE FEH” WA, 不 仅 是 在 日 前 生 话 中 ,工作 中 也 如 此 。 我 觉得 用 这 种 方式 为 
客户 解释 技术 概念 或 是 证 明 我 所 做 的 可 用 性 改变 的 重要 性 确实 挺 不 错 。 因 此 , 尽管 你 已 经 开始 使 
用 渐进 增强 技术 ， 你 还 是 可 以 使 用 以 下 这 些 比 喻 来 说 服 尚 存 犹疑 的 客户 或 老板 。 

假设 你 让 亲爱 的 老公 (CBE) 下 碗 面 。 面 被 端 到 昌 前 时 ， 它 已 具备 了 所 有 能 让 我 们 得 以 称 其 
为 “和 面 ” 的 食材 : 筋 道 的 面条 、 鲜 美的 面 淘 、 适 量 的 项 ， 其 至 还 可 能 有 区 化 儿 什 么 的 。 这 面 尝 起 
RIDA GH FE PREY BOOK 

(APE AEA Bl, PRE CRI TÉ AN OES PRAT R, TRIP ADAP AR, TE 
mm, EELO AUR, EEA ie SA, TEL EAE LE x Bn TE E 88 THOU 

这 例子 用 在 Web 网 站 上 也 一 样 : 一 个 简洁 请 晰 并 能 兼容 IE 6 的 网 站 就 是 一 碗 普通 的 面 ， 它 
完全 能 符合 访问 者 的 期 望 ， 也 可 以 满足 他 们 对 内 容 的 需求 。IE 6 用 户 不 会 想到 Firefox 用 户 竟 可 
以 看 到 一 些 用 CSS3 所 实现 的 更 为 别致 的 东西 ,除非 你 的 网 站 用 旧式 六 览 副 看 起 来 就 是 乱七八糟 
的 (就 像 古 面 里 没 放 盐 ) 你 最 好 修复 这 个 问题 一 一 否则 你 的 用 户 想 不 到 换个 浏览 器 就 会 别 
AWR. 

如 末 你 是 平 友 很 少 吃 面 的 南方 人 ， 也 可 以 想象 一 下 一 碗 颗粒 饱满 却 平 痰 无 味 的 日 米 饭 与 
另 一 碗 光 油 油 亮 且 色 味 俱全 的 扬州 炒饭 之 间 的 差异 。 又 或 者 你 平时 爱 看 电视 ， 那 么 一 台 小 型 
的 传统 电视 和 一 部 高 清纯 平 的 液晶 电视 也 能 产生 相同 的 对 比 效 采 一 一 液晶 电视 的 效 坟 显然 会 
悦目 很 多 。 想 让 陈旧 设备 下 的 页 面 看 起 来 也 一 样 其 实 是 很 不 明智 的 ， 要 知道 IE6 可 是 2001 年 
的 产品 。 

男 外 一 件 很 不 明智 的 事情 是 期 望 录 像 机 能 够 播放 监 光 碟 。 这 从 一 开始 就 不 可 能 ， 因为 录像 机 
的 发 明 比 蓝光 早 很 多 年 。 蓝 光碟 使 用 了 很 多 新 技术 来 提高 画 质 和 功能 ,这 远 不 是 录像 融 所 能 提供 
的 。 只 要 你 愿 车 ， 你 依旧 可 以 用 录像 机 来 看 电影 ,但 是 殴 光 版 本 的 电影 看 起 来 更 棒 ， 还 提供 很 多 
额外 内 容 。 每 个 人 都 看 到 了 相同 的 电影 内 容 ， 但 新 技术 的 罗 狼 者 立即 获得 了 额外 的 好 处 ， 而 无 需 
SES BUDE HS AEG o 

同样 道理 ， 当 有 人 在 展示 一 项 CSS3 技术 的 时 候 去 询问 其 在 IE 6 上 的 表现 也 和 古 党 无 意义 的 ， 
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TELE CSS3 的 发 明 都 早出 现 了 好 些 年 。 只 要 用 户 所 获得 的 内 容 都 是 相同 的 , 而 且 CSS3 技术 对 网 站 
在 下 6 下 的 表现 也 这 无 损害 ， 那 么 这 项 仪 有 部 分 人 可 以 享受 到 的 设计 理念 就 值得 肯定 。 


1.4 CSS3 的 好 处 


我 希望 你 已 经 清楚 地 了 解 了 为 什么 湖 进 增强 这 项 通用 的 开发 技术 非 稼 好 ， 但 我 们 还 设 有 开 
台 讨 论 CSS3 的 独特 好 处 。CSS3 的 优点 远 远 不 止 于 能 让 页 和 面 看 起 来 栈 炫 异常 一 一 尽 省 这 也 是 不 
可 名 视 的 。 当 你 读 过 本 书 之 后 就 会 知道 ，CSS3 能 帮助 你 创建 很 多 十 分 炫目 的 效果 ,使 网 站 设计 
fn EAS te o 

但 其 实 大 部 分 的 CSS3 视觉 效 霖 是 无 需 依赖 CSS3 来 实现 的 , 你 还 可 以 找到 很 多 蔡 代 的 方法 ， 
比如 使 用 图 片 、JavaScript 或 Flash。 因 此 除了 “看 起 来 更 酷 ” 之 外 ， 还 需要 有 其 他 的 理由 来 支持 
我 们 使 用 CSS3。 

这 种 原因 的 确 存 在 一 一 总 之 , 在 大 多 数 情 况 下 ,使 用 CSS3 不 仅 可 以 多 于 开发 和 修改 页 和 面 ， 
还 能 减少 这 个 页 面 的 加 载 时 间 。 与 此 同时 ， 你 还 能 增加 网 站 的 可 访问 性 和 可 用 性 ， 使 网 站 能 
够 适 配 更 多 的 设备 ， 甚 至 还 可 以 优化 网 站 的 搜索 结 采 排名 。 下 面 更 详细 地 介绍 这 些 好 处 。 











更 多 关于 渐进 增强 的 信息 
关于 渐进 增强 实在 是 有 太 多 可 以 说 的 了 ,事实 上 ,其 至 有 一 整 本 专门 用 来 讲述 它 的 书 ， 名 
v] Designing with Progressive Enhancement (www.filamentgroup.com/dwpe) , KERUN 7] 4X, LA 
描述 得 足够 详细 了 ,但 你 可 能 还 需要 更 深入 地 了 解 什 么 是 渐进 增强 ,以 及 为 何 它 关 平 能 否 说 服 
你 的 团队 成 员 、 老 板 或 客户 。 因 此 我 布 望 下 列 这 些 链接 能 对 你 有 所 帮助 。 

口 The Case for Designing with Progressive Enhancement (渐进 增强 设计 实例 ) ,作者 是 Todd 
Parker, Maggie Costello Wachs, Scott Jehl 和 Patty Toland (www.peachpit.com/articles/article. 
aspx?p=1586457) 。 

O Progressive Enhancement: What It Is, And How To Use 11? (渐进 增强 的 概念 和 用 法 ) ,作者 是 Sam 
Dwyer (www.smashingmagazine.com/2009/04/22/progressive-enhancement-what-it-is-and- 
how-to-use-it) , 

Q Progressive Enhancement: Paving the Way for Future Web Design (渐进 增强 : 未 来 的 Web 
设计 之 路 ) VEGXP Steven Champeon (www.hesketh.com/publications/articles/progressive- 
enhancement- paving-the-way-for) 。 

O Graceful Degradation Versus Progressive Enhancement (优雅 降级 和 渐进 增强 ) ， 作 者 是 


Christian Heilman (dev.opera.com/articles/view/graceful-degradation-progressive-enhance ) 。 


1.4.1 减少 开发 和 维护 的 耗 时 
很 多 CSS3 技术 通过 提供 相同 的 视觉 效 末 而 成 为 了 图 片 的 “替代 品 "。 举 例 来 说 ， 假 设 要 为 
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某 个 区 块 实现 一 个 投影 效果 , 你 不 必 再 通过 创建 一 个 或 多 个 图 片 作 为 背景 来 实现 该 需求 ; 现 如 今 
你 只 需 使 用 CSS3 的 box-shadow 属性 就 可 以 产生 阴影 效果 ,这 将 把 你 从 绘图 、 切 图 和 优化 图 片 
的 工作 中 解放 出 来 。 

如 果 你 需要 后 续 地 调整 投影 效果 或 单纯 地 想 要 测试 不 同 参 数 配 置 下 的 效 末 变化 ， 那 么 使 用 
CSS 也 比 使 用 图 片 更 为 方便 。 比 如 你 的 用 户 希 望 使 投影 更 模糊 些 ,或 是 距离 盒 容 器 更 远 一 点 , 或 
是 用 红色 替换 掉 灰 色 等 ， 当 使 用 CSS3 的 时 候 你 能 够 在 几 秒 钟 乙 内 就 实现 这 些 不 同 的 配置 ， 而 不 
需要 到 Photoshop 里 去 执行 修改 并 重新 输出 图 片 。 

一 些 CSS3 技术 同样 能 让 你 远离 脚本 和 Flash, 这 会 有 效 地 提升 效率 , 因为 你 无 需 花 费时 间 去 
寻找 合适 的 脚本 并 修改 它 以 适 配 你 的 网 站 。 

mu. ALE CSS3 技术 还 能 让 你 的 页 面 结 构 更 “ 盏 条 ， 因 为 你 不 用 再 租 套 很 多 的 div 和 类 ， 
这 也 可 以 被 解读 为 可 以 有 效 地 减少 工作 时 间 。 比 方 说 , 现在 你 可 以 把 多 个 背景 图 片 的 定义 写 在 同 
一 个 元 素 当 中 , 这 样 你 就 不 用 去 舱 套 多 余 的 元 素 并 为 它们 分 别 指定 不 同 的 背景 了 。 你 还 可 以 根据 
元 素 在 文档 树 中 所 处 的 位 置 使 用 CSS3 的 选择 符 来 为 它 定位 ， 这 样 一 来 你 不 用 再 花 时 间 去 创建 更 
多 的 类 并 将 它们 应 用 到 必需 的 元 素 上 ， 之 后 还 要 确保 新 增 内 容 也 同样 应 用 了 这 些 类 ，。 





























1.4.2 提升 页 面 性 能 


更 少 的 标记 和 图 片 意味 着 用 户 需 要 下 载 的 内 容 将 会 变 少 , 页 面 加 载 得 也 会 更 快 。 更 少 的 图 片 、 
脚本 和 Flash 文件 也 就 意味 着 更 少 的 HTTP 请 求 数 ， 这 就 是 提升 页 面 加 载 束 度 的 最 佳 方法 之 一 。 
事实 上 ， 和 雅虎 专业 的 性 能 团队 将 “减少 HTTP 请 求 数 ” 视 为 “关于 提升 游客 首次 访问 速度 的 最 重 
要 的 性 能 优化 指导 ”(http://developer.yahoo.com/performance/rules.html ) 。 


物 尽 其 用 


在 本 书 的 许多 地 方 我 都 提 到 了 CSS3 技术 是 如 何 去 取 代 图 像 、JavaScript、Flash、 类 和 div 
的 多 层 餐 套 的 ,但 这 并 不 是 说 这 些 东西 原本 就 是 不 应 该 存在 的 。 比 如 ,我 没有 说 应 该 禁止 使 用 
所 有 图 片 ， 那 无 妖 是 相当 荒唐 的 。 只 要 用 得 适当 ,所 有 这 些 东 西 都 还 是 优秀 的 工具 ， 而 当 另 一 
项 技术 更 适合 用 来 解决 当前 需求 时 ,使 用 CSS 取而代之 反而 是 不 明智 的 ， 比 如 说 不 能 仅仅 因 
为 CSS 比较 “ 酷 ， 就 放弃 实 际 上 更 为 过 用 的 JavaScript 技术 而 改 用 CSS 来 实现 下 拉 菜 单 。 不 
过 要 是 使 用 CSS3 可 以 更 有 效率 或 能 够 提升 用 户 体验 ,同时 又 可 以 达到 相等 黄 至 更 好 的 表现 时 ， 
我 认为 这 种 选择 将 是 明智 的 。 


当 剂 咒 副 从 服务 帮 获 取 页 面 内 容 时 ， 它 需要 发 起 HTTP tak, BER Was REL Web 页 面 中 一 
个 不 同 的 内 容 时 ， 诸 如 样式 、 图 片 、 脚 本 之 类 的 文件 ， 它 就 必须 回 到 服务 帮 去 获取 这 些 特定 的 文 
件 。 这 个 过 程 是 需要 化 费时 间 的 ， 相 比 所 有 内 容 的 总 字 贡 数 而 言 ， 它 对 页 面 加 载 速度 的 影响 会 更 
大 。 这 就 意味 着 ， 一 个 页 面 中 如 条 有 10 个 10KB 大 小 的 图 片 ， 那 么 加 载 这 个 页 面 所 需 的 时 间 将 会 
远大 于 只 有 1 个 100KB 大 小 图 片 的 页 面 ， 其 至 可 能 大 于 只 有 1 个 200KB 大 小 图 片 的 页 面 。 
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使 用 CSS3, 你 束 可 能 创造 一 个 无 需 任何 图 片 的 图 形 化 网 站 , 极 大 地 减少 HTTP 的 请 求 数量 ， 
并 且 能 提升 页 面 的 加 载 速度 。 

当然 我 并 不 是 说 添加 的 任何 CSS3 特性 都 会 让 页 面 更 快 , 它 取 决 于 用 CSS3 来 替代 什么 技术 ， 
同时 也 取决 于 如 何 使 用 CSS3。 

例如 第 3 章 将 介绍 如 何 使 用 afont-face 链接 一 个 外 部 的 字体 文件 , 字体 文件 本 身 就 会 导致 
一 次 新 的 HTTP 请 求 一 一 用 户 必 须 通过 它 来 拉 取 字体 文件 ,而且 这 个 文件 尺寸 还 可 能 会 很 大 。 因 
此 在 某 些 情况 下 , 使 用 efont-face 会 降低 页 面 加 载 速度 。 从 另外 一 方面 来 说 ， 如 采用 大 量 的 图 
乒 来 实现 特殊 文字 效 采 , 那么 让 用 户 下 载 一 个 字体 文件 反而 会 更 快 。 它 可 能 也 会 比 使 用 JavaScript 
或 Flash 实现 文本 效果 更 快 。 这 只 是 诸多 例子 中 的 一 个 ， 而 页 面 速度 到 底 如 何 变 化 则 取决 于 用 
CSS3 来 取代 什么 技术 ， 所 使 用 字体 的 尺寸 大 小 ， 是 否 精简 了 字体 文件 中 的 字符 数 ， 以 及 在 具体 
实现 efont-face 这 个 特性 时 的 其 他 影响 因素 。 

某 些 图 形 化 的 CSS3 技术 ， 比 如 渐变 ， 能 够 减少 HTTP 请 求 ， 但 可 能 要 求 训 贤 絮 执行 更 多 的 
工作 来 谊 染 特效 , 这 将 可 能 导致 训 览 三 啊 应 缓慢 , 并 减少 可 用 性 。 因此, 请 不 要 滥用 复杂 的 特效 ， 
并 要 完整 地 测试 所 实现 的 那些 特效 。 

但 关键 的 是 , 很 多 CSS3 技术 能 够 在 任何 情况 下 都 大 幅 提 高 页 面 的 性 能 。 单 这 一 条 束 足 以 成 
为 使 用 CSS3 的 理由 ,因为 用 户 确实 在 意 页 面 的 加 载 速度 。 最 近 Bing 和 Google 都 在 做 一 些 相似 
的 实验 : 故意 将 服务 絮 的 啊 应 时 间 随 机 延迟 数 毫 秒 ， 以 此 来 观察 是 否 对 用 户 体 验 产 生 影响 。 通 
过 实验 他 们 发 现 : 等 待 时 间 越 长 ， 用 户 在 这 个 页 面 上 操作 的 可 能 性 就 越 少 ， 通 第 他 们 会 减少 搜 
索 次 数 或 者 点 击 次 数 ， 然 后 就 会 离开 这 个 页 面 。 黄 至 少 于 半 秒 的 延迟 也 会 造成 很 大 影响 。 关 于 
页 面 迟 缓 所 造成 的 商业 影响 ， 可 以 参见 Stoyan Stefanov 的 “The performance pitch”(“ 性 能 商业 
观点 ”) (www. phpied.com/the-performance-bussiness-pitch ) 。 
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快速 的 页 面 不 仅 能 吸引 用 户 ， 同 时 也 会 让 Google 很 高 兴 ， 难道 我 们 不 都 希望 在 Google 
上 有 好 的 表现 吗 ? 从 2010 年 3 月 开始 , Google 开始 通过 将 页 面 束 度 作为 评分 的 标准 之 一 来 发 
励 页 面 提速 ， 因 此 加 载 束 度 较 快 的 页 面 在 搜索 结 末 中 的 排名 比 其 范 争 者 更 徘 前 。 

即使 Google 不 把 速度 当 作 评分 依据 ， 并 且 别 的 搜索 引擎 也 没有 这 么 做 ， 你 依然 可 以 获得 
很 好 的 搜索 引擎 优化 ， 只 要 用 CSS3 REWER LEERE kA Flash 即 可 。 虽 然 搜索 引擎 
也 能 读 取 图 片 的 alt 属性 或 者 茶 些 Flash 文件 ,但 正 第 的 文本 通 第 能 让 你 的 网 站 获得 更 高 的 
权重 。 


1.5.1 提高 可 用 性 和 可 达 性 


使 用 真实 文本 而 非 图 片 有 一 个 更 大 好 处 ， 即 真实 文本 对 任何 人 来 说 都 更 可 用 , 尤其 是 对 残障 
人 士 来 说 。 用 刀 可 以 把 真实 的 文本 放大 和 缩小 并 能 改变 颜色 ， 从 而 使 页 面 更 加 容易 阅读 ， 也 更 便 
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于 复制 粘贴 ， 通 过 六 艳 龙 的 查找 功能 来 搜索 页 面 会 更 容 多 ,通过 搜索 引擎 或 者 其 他 工具 抓 取 页 面 
更 轻松 ， 也 很 容易 将 页 面 翻译 成 不 同 的 语言 。 

CSS3 并 不 是 提高 可 读 性 的 万 能 工具 ， 如 果 滥 用 样式 或 者 设计 ， 其 至 有 可 能 会 使 页 面 难 以 辩 
认 。 但 如 果 在 真实 的 文本 上 正确 地 使 用 CSS3 特性 ， 如 efont-face、text-shadow、 变 形 和 其 
他 CSS3 效果 ， 而 不 是 使 用 图 片 ， 将 会 极 大 提高 网 站 的 可 用 性 。 

男 外 一 个 通过 使 用 CSS3 来 提高 可 用 性 的 例子 就 是 使 用 媒体 查询 。 之 前 我 已 经 提 过 媒体 查询 
如 何 基 于 用 户 的 显示 特性 来 定义 不 同 的 样式 , 做 到 根据 用 户 不 同 的 设备 和 设置 来 调整 样式 。 这 种 
技术 能 够 保证 最 大 限度 地 利用 空间 ,也 能 让 页 面 在 不 同 的 用 户 剂 贤 场 景 都 具有 最 佳 的 可 读 性 。 第 
6 章 会 更 详细 地 介绍 媒体 查询 。 


1.5.2 “与 时 俱 进 
学 习 和 使 用 CSS3 还 有 一 个 额外 的 好 处 ， 它 能 让 你 始终 处 于 Web 设计 的 前 沿 。CSS3 不 会 消 
失 ， 它 是 未 来 我 们 构建 网 站 的 方式 。 学 习 CSS3 越 来 越 重 要 ， 这 也 能 够 增加 你 的 职业 技能 和 竞争 


力 。 现 在 ， 它 还 能 帮助 你 缩短 与 顶级 设计 师 或 开发 者 的 差距 。 马 上 开始 使 用 它 〈 至 少 在 个 人 项 目 
上 )， 然 后 不 断 麻 三 你 的 技 马 并 且 在 职业 道路 上 不 断 前 进 。 


1.6 RGF: 公路 安全 研究 中 心 
为 了 对 这 些 使 用 CSS3 的 好 处 有 更 好 的 认识 ， 我 们 来 看 看 一 个 真实 的 网 站 是 如 何 通过 使 


用 CSS3 3E ERTVIHB Web 设计 从 而 获得 明显 提升 的 。 我 选择 在 自己 的 而 不 古 陌生 人 的 网 站 上 
找 在 。 








1.6.1 使 用 CSS3 之 前 


2006 年 ,我 为 UNG 公路 安全 研究 中 心 Cwww.hsrc.unc.edu) 设 计 和 开发 了 使 用 CSS 以 及 HIML 
的 网 页 。 图 1-3 展示 了 HSRC 的 主页 。 上 自我 最 开始 创建 它 以 来 ， 它 基本 上 设 有 什么 变化 ， 甚 至 比 
某 些 内 页 还 要 简单 ， 所 以 基本 上 和 大 部 分 的 网 页 比较 类 似 , 但 即便 如 此 ， 在 这 个 简单 的 页 面 上 还 
是 有 大 量 的 图 片 存 在 。 你 可 以 看 到 它 使 用 了 很 多 的 圆 角 、 产 变 和 队 影 。 
我 想 观 察 一 下 在 使 用 了 这 些 图 片 之 后 ， 这 个 网 站 的 实际 性 能 如 何 ， 所 以 我 在 Firefox 3.6, 
IE 84H IE 6 里 面 打 开 它 进行 了 测试 ， 表 1-1 显示 了 HTTP 请 求 的 数目 和 在 每 个 浏览 器 中 的 平均 
加 载 时 间 。 
表 1-1 原始 页 面 的 性 能 
Firefox 3.6 IE 8 IE 6 
HTTP 请 求 30 37 47 


页 面 加 载 时 间 (单位 : Fb) 1.5 1.3 3 
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图 1-3 公路 安全 中 心 首 页 ( 男 见 彩 插图 1-3) 


我 想 这 些 加 载 时 间 还 不 错 ， 但 是 它们 肯定 还 能 优化 。 特 别 是 在 IE 6 下， 等 待 的 时 间 有 点 长 。 
如 果 我 能 够 减少 HTTP 请 求 的 数量 ， 那 就 能 显著 减少 页 面 加 载 的 时 间 。 

AH HTTP 请 求 来 源 于 选项 卡 式 导航 条 。 每 一 个 导航 条 都 是 一 个 单独 的 图 片 , 并 且 包 含 三 
种 状态 : 非 选 中 态 、 悬 停 态 和 当前 选中 态 (图 1-4) 。 我 最 初 制作 这 个 页 面 时 ， 使 用 了 名 为 “CSS 
Sprites” 的 背景 图 片 技术 将 多 张 背 景 图 片 合并 成 一 张 , 并 通过 使 用 background-position 属性 
来 移动 可 见 的 区 域 。 但 我 并 没有 过 度 使 用 这 一 技术 。 


safety Information 4 EVE AS 





Safety Information 县 停 术 





in 


Safety Information 当前 选中 态 


1-4 每 个 导航 条 有 三 种 状态 
我 不 太 希 望 拿 这 个 版 本 来 和 新 的 CSS3 技术 进行 比较 ， 所 以 我 把 所 有 的 选项 下 图 族 都 合并 成 
一 张大 的 图 片 ， 并 且 修 改 了 使 用 这 些 图 片 的 CSS， 然 后 对 这 个 修订 版 本 进行 测试 后 ,， 表 1-2 显示 
了 如 下 测试 结 采 。 
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表 1-2 ”改进 后 的 页 面 性 能 


Firefox 3.6 IE 8 IE 6 
HTTP 请 求 29 30 34 
页 面 加 载 时 间 (单位 : fb) 1.3 1.15 2 
加 载 时 间 减 少量 13% 11% 33% 


将 HTTP 请 求 合并 无 疑 能 够 很 好 地 减少 页 面 加 载 时 间 ， 特别 是 在 TE GF. 但 是 请 记 住 ,将 所 
有 选项 下 图片 合 并 成 一 张 是 很 困难 的 工作 , 而且 相对 独立 的 图 片 来 说 ,后 期 维护 工作 也 比较 复杂 
CSS 也 会 变 得 很 复杂 。 这 就 是 你 使 用 Sprites 技术 的 代价 。 但 是 拿 这 个 页 面 与 CSS3 所 增强 的 版 本 
相 比 才 更 有 说 服 力 。 


1.6.2 ”使 用 CSS3 之 后 


”通过 创 建 一 个 CSS3 版 本 的 页 面 ， 我 减少 了 9 张 图片 ， 并 且 用 纯 CSS 来 禁 代 它们 (图 1-5)。 
这 些 变更 后 ， 页 面 在 现代 说 览 合 下 看 起 来 和 之 前 的 版 本 几乎 完全 一 样 。 
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图 1-5 使 用 CSS3 省 去 了 图 中 标记 所 示 部 分 的 9 张 图 片 ， 结 果 整 个 页 面 和 图 1-3 没有 两 样 
( 另 见 彩 插图 名 1- 5) 
我 移 除 了 选项 卡 的 Sprite 图 片 ， 在 没有 使 用 任何 图 片 的 情况 下 ， 通 过 使 用 border-radius 
和 CSS3 渐变 效果 来 重新 制作 选项 卡 (图 1-6)。 在 这 些 改变 之 后 , 选项 卡 上 开始 使 用 真实 的 文本 ， 
从 而 增强 了 它 的 可 访问 性 。 


Newsletter Links E cic Can Help. 





1-6 CSS3 制作 的 导航 和 原版 基本 一 致 


页 脚 部 分 的 两 个 选项 卡 也 使 用 了 同样 的 技术 ， 通 过 CSS3 ir ok EU Tae xc EH. 
CSS3 渐变 还 替代 了 “HSRC PROJECT AREAS” fu “LATEST NEWS” HWRE RH. BAP, 
导航 条 上 也 使 用 box-shadow 来 替代 了 头 部 内 容 底 部 的 微小 讲 变 。 

我 使 用 border-radius 来 移 除 “HSRC PROJECT AREAS” 顶 部 和 底部 的 圆 角 图 片 ， 以 及 
“LATEST NEWS” 头 部 的 图 片 。 对 于 “HSRC PROJECT AREAS” 和 “LATEST NEWS” 两 个 部 
分 的 头 部 文字 , 我 移 除了 图 片 , 使 用 afont-face 来 美化 真实 的 文本 。 我 并 没有 使 用 和 图 片 一 臻 
的 文字 ， 而 是 使 用 了 一 种 相似 的 , 是 因为 那 种 文字 基于 版 权 原 因 不 允许 被 efont-face 5H. 在 
“HSRC PROJECT AREAS ”底部 的 三 条 边框 ， 我 使 用 了 box-shadow， 这 个 特性 能 够 在 不 使 用 
片 的 情况 下 创建 复杂 边框 的 效果 。 

这 不 是 CSS3 在 这 个 页 面 上 唯一 能 够 添加 的 地 方 ， 但 是 它 确实 能 够 快速 而 轻易 地 实现 ， 而 且 
不 会 对 不 支持 的 浏览 器 造成 很 大 的 影响 。 应 用 CSS3 后 CSS 文件 将 会 略微 变 大 , 但 这 并 不 会 造成 
很 大 影响 ， 因 为 它们 大 多 数 都 是 在 替换 旧 的 长 background 定义 。HTML 文件 将 会 是 一 致 的 ， 
除了 链接 到 头 部 的 部 分 会 有 所 改变 。 

表 1-3 展示 了 这 个 页 面 的 性 能 。 即 便 是 使 用 efont-face 之 后 增加 了 两 个 HTTP 请 求 , 总 
数 还 是 有 明显 下 降 , 因为 我 移 除 了 九 张 图 片 , 同 时 还 移 除 了 用 来 在 IE6 下 支持 PNG 图片 Alpha 
ARH JavaScript 文件 ， 已 经 不 再 需要 它 了 ， 因 为 这 儿 已 经 没有 任何 Alpha 透明 的 PNG 
文件 。 











表 1-3 使 用 CSS3 后 的 页 面 性 能 


Firefox 3.6 IE 8 IE 6 
HTTP 请 求 23 23 24 
页 面 读 取 时 间 (单位 : 秒 ) 1.1 1 1.5 
读 取 时 间 减 少量 15% 13% 25% 


对 加 载 时 间 的 减少 率 ， 我 是 使 用 之 前 那个 优化 成 一 张 图 片 的 版 本 来 进行 比较 的 。 平 均 而 言 ， 
加 载 时 间 在 Firefox 3.6 会 减少 15%, Æ IE 8 2mb 13%, (EIE 6 会 有 25%。 当 然 这 只 是 一 个 有 
限 的 例子 ， 这 种 优化 可 以 更 彻底 ,通过 减少 更 多 的 图 片 ， 而 优化 的 效 末 在 更 大 或 者 更 复杂 的 网 站 
上 会 更 明显 ， 因 为 它们 会 比 单 个 页 面 上 多 更 多 的 “界面 型 ”图 片 (这 是 相对 于 内 容 型 图 片 而 言 ， 
好 比照 片 )。 最 关键 的 是 ，CSS3 能 够 让 页 面 加 载 速度 明显 变 快 ， 同时 也 提高 了 一 上 扣 可 用 性 和 可 访 
rE 

这 会 让 网 站 的 用 户 更 高 兴 ， 而 高 兴 的 用 户 通 党 也 会 让 网 站 背后 的 人 们 受益 。 

具有 讽刺 意味 的 古 , 尽快 在 正 6 上 并 不 能 感知 到 我 们 所 做 的 这 些 改变 , 但 使 用 它 的 用 户 还 是 
可 以 从 中 受益 。 了 下 6 用 户 同 样 可 以 获得 更 快 的 页 面 加 载 速度 , 因为 CSS3 效 采 取代 了 原来 的 图 片 。 
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但 是 在 IE 上 这 个 页 和 面 看 起 来 具体 是 怎样 的 ? 到 底 会 有 多 念 怖 ?你 可 以 目 己 来 了 解 一 下 图 


1-7。 这 是 IE 8 上 的 截图 ， 但 是 在 正 6 上 我 的 感觉 也 是 这 样 的 。 圆 角 的 内 容 都 变 成 了 正方 ， 也 没 
法 再 看 到 渐变 效 灯 。 它 是 侍 看 起 来 够 好 ?我 认为 没有 ， 它 是 舍 看 起 来 很 不 好 ? 我 认为 也 没有 。1IE 
用 户 会 知道 他 们 错过 了 一 些 视 党 效 末 吗 ? 不 太 可 能 。 即 使 他 们 知道 了 , 你 认为 他 们 会 宁愿 选择 圆 
角 图 片 而 不 古 更 快 的 网 速 吗 ? 
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图 1-7 WEE E8 ZW BJUUA PARR IE, BNE LED o Ah HF CSS3 
说 明 下 9 的 beta 版 在 本 书 编撰 之 时 已 经 提供 下 载 ， 可 以 显示 为 所 增加 的 绝 大 多 数 CSS3 效果 。 
当 它 正式 发 布 时 或 许 能 显示 更 多 。 

你 也 可 以 继续 努力 让 E TU zs Ete Ree Aix Lear, BEA FAR Se, 但 是 这 么 做 
真 的 值得 吗 ” 你 需要 做 一 系列 额外 的 工作 ,也 会 消除 我 们 为 IE 用 户 性 能 提升 所 做 的 努力 。 这 取决 
于 实际 的 项 目 ， 在 很 多 场合 这 种 工作 还 是 很 有 意义 的 ， 在 本 书 中 我 们 就 有 儿 次 用 不 同 的 方法 为 TE 
添加 特定 的 兼容 方案 。 不 是 说 绝对 不 能 为 TE 添加 额外 的 兼容 方案 ， 只 是 要 考虑 这 个 代价 而 已 。 
1.7 ”明智 地 使 用 CSS3 

现在 你 了 解 到 了 CSS3 的 使 用 会 带 来 多 大 的 用 处 和 好 人 处， 是 否 应 该 马上 把 它们 添加 到 你 的 样 
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式 表 中 去 了 ? 当然 是 的 ， 不 过 我 建议 你 先 了 解 一 些 使 用 CSS3 的 最 佳 实践 。 正 如 CSS2.1 一 样 
CSS3 也 具有 特有 的 注意 事项 ， 比 如 如 何 制作 样式 表 从 而 使 它 更 有 组 织 性 ， 更 有 效 ， 也 更 适合 未 
来 的 发 展 。 你 也 需要 知道 如 何 实现 CSS3 才能 不 损害 到 不 支持 的 浏览 器 ， 以 及 如 何 为 特定 的 浏览 
器 提供 不 同 的 兼容 方案 。 





1.7.1 浏览 器 前 绥 

当 一 个 浏览 絮 实 现 了 一 个 新 的 属性 、 值 或 者 选择 强 ， 而 这 个 特性 还 不 是 处 于 候选 推荐 标准 状 
态 的 时 候 ， 这 属性 的 前 面 会 添加 一 个 前 级 以 便于 它 的 演 染 引 敬 识别。 举例 来 说 ，-moz- 
border-radius 就 是 基于 Mozilla 的 系列 浏览 如 如 Firefox 对 于 border-radius 属性 支持 的 当 
前 实现 。 表 1-4 提供 了 一 系列 前 级 的 列表 。 


表 1-4 CSS 属 性 的 浏览 器 前 绥 


前 By 泻 染 引擎 使 用 该 引擎 的 浏览 器 

-khtml- KHTML Konqueror 

-Ins- Trident Internet Explorer 

-moz- Mozilla Firefox, Camino, Flock 

= Presto Opera, Opera Mobile, Opera Mini, Nintendo Wi 浏览 器 
-webkit- Webkit Safari, Safari on iOS, Chrome, Androidi i zs 


* 在 Presto 泻 染 引 敬 中， 对 话 (Speech) 相关 的 属性 前 缀 是 -xv- 而 不 是 -o-。 


本 书 中 , 我 们 会 关注 -moz-、-o- 和 -webkit- 前 级 ， 其 他 的 则 因为 太 不 和 常见 而 没 必 要 在 这 里 
讨论 。 

1. 为 什么 它们 会 存在 

鹿 蜗 右 使 用 前 级 来 尝试 一 些 新 属性 、 值 和 选择 各 ,即便 它们 还 没有 最 终 定稿 一 一 这 是 一 个 好 
的 测试 方法 , 在 必要 时 也 可 以 对 它们 进行 修正 或 者 重新 定义 。 如 玉麟 蜗 右 一 上 来 就 直接 使 用 标准 
属性 ， 那 它们 就 会 被 直接 锁定 在 这 个 特性 的 实现 上 而 不 易 变 更 。 

开发 者 可 能 会 立即 使 用 无 前 级 的 属性 ， 而 且 也 会 一 直 期 望 它 能 够 保持 同样 的 表现 不 再 变更 。 
如 果 神 蜗 絮 在 之 后 对 这 个 属性 做 了 变更 , 不 人 绾 是 由 于 它 的 实现 存在 缺陷 , 或 者 是 由 于 规 沁 本 里 发 
生 了 变更 , 所 有 现存 的 使 用 了 这 个 属性 的 网 站 都 有 可 能 面临 出 问题 的 风险 。 除 了 会 出 现 这 样 的 锁 
定 问 题 外 ， 这 种 方式 也 有 可 能 强迫 其 他 浏览 器 和 W3C 去 适 配 它 的 实现 。Eric Meyer 在 他 的 “前 
Ze Mase Reh” (www.alistapart.com/articles/perfix-or-posthack) 这 篇 精彩 的 文章 中 提 到 了 两 个 真实 
的 例子 ， 讲 述 了 在 过 去 这 种 不 等 的 循环 是 如 何 发 生 的 。 

即使 剂 览 历 不 会 变更 它 的 实现 从 而 不 去 影响 现 有 的 网 站 ，W3C 如 采 改 变 了 它 的 规范 定义 怎 
么 办 ? 如 末 其 他 的 训 览 历 直 接 使 用 更 新 的 规 苑 中 的 新 表现 该 怎么 办 ? 现在 你 有 不 同 的 浏览 礁 用 
不 同 的 方法 来 实现 同样 的 标准 属性 。 这 不 正 是 当年 Netscape4、Mac IES 和 Windows IE 6 并 存 的 
那些 岁月 吗 ? 复杂 和 不 稳定 的 Hack， 充 满 了 缺陷 的 实现 ， 其 至 这 些 缺 陷 与 实际 所 需要 实现 的 属 
性 毫 无 关系 ， 这 些 问 题 不 断 扩 散 ， 因 为 很 多 特性 都 与 训 贤 右 规 范 的 属性 实际 不 符 。 
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有 前 级 的 属性 会 告知 开发 者 这 个 属性 只 是 实验 性 质 的 而 且 很 有 可 能 会 变更 。 它 给 予 麟 览 絮 在 
必要 时 候 进 行 变更 的 灵活 性 , 这 让 阅览 禹 能 够 更 快 地 发 布 或 者 重新 定义 新 的 属性 。 这 也 让 开发 者 
能 够 更 快 地 有 机 会 尝试 新 的 属性 ， 并 且 能 够 参与 到 在 真实 环境 下 测试 和 修订 这 些 特 性 的 过 程 。 

一 旦 规 苑 开始 稳定 下 来 , 剖 览 右 也 达到 了 能 够 正确 实现 属性 的 程度 , "Eso RT EL SERIA Bil 2 e 
如 末 开 发 者 在 样式 表 中 同样 提供 了 无 前 绥 的 属性 的 定义 一 一 这 是 很 好 的 癌 后 兼容 的 方式 一 一 那 
么 开发 的 页 面 就 能 够 自 适 应 最 终 定义 完成 的 特性 。 如 果 开 发 者 没有 这 样 做 , 那 这 些 页 面 也 不 会 受 
到 影 啊 一 一 旧 有 的 前 级 属性 还 古 能 够 正常 工作 。 没 有 任何 一 个 使 用 前 级 的 网 站 会 发 生 问 题 。 

2. BIZ HJ [8] 

训 览 万 前 缀 实际 上 还 是 存在 一 些 回 题 的 。 最 主要 的 抱怨 是 你 需要 用 几 行 不 同 的 代码 来 完成 实 
际 上 相同 的 一 件 事 ， 比 如 : 


div { 
-moz-transform: rotate(45deg); 














-o-transform: rotate(45deg); 
-webkit-transform: rotate(45deg); 
transform: rotate(45deg); 


} 

这 些 重 复 的 代码 会 增 大 样式 表 的 文件 大 小 ， 这 样 确实 挺 烦人 的 。 如 琳 使 用 标准 属性 的 话 ， 你 
Amz rink, 这 样 束 清晰 干 第 多 了 。 许 多 CSS 预 处 理工 具 事 实 上 可 以 达到 这 个 效 采 一 一 你 
只 需要 写 标准 的 属性 ， 这 些 工 具 会 帮 你 创建 放 贤 强 特 定 的 属性 。 能 够 这 么 做 的 工具 包括 Sass 
(http://sass-lang.com) , LESS (http://lesscss.org) , eCSStender (www.alistapart.com/articles/stop- 
forking-with-css3) 以 及 其 他 。 但 是 使 用 工具 来 避免 书写 训 览 左前 绥 也 有 它 的 一 些 不 足 。 如 采 一 种 
A ase THES Js EH) SMF EAR BET, 你 疫 法 在 不 使 用 这 种 剖 贤 从 前 组 的 同时 却 仍然 使 用 其 他 六 
览 尼 的 前 组。 如 采 襄 览 伙 的 实现 有 轻微 不 同 的 时 候 , 你 也 没 法 为 这 些 实 现 指定 不 同 的 值 。 同样 地 ， 
添加 脚本 也 会 让 你 的 页 面 变 慢 。Eric Meyer (www.alistapart.com/aritcles/prefix-or-posthack) 认为 
这 种 方法 可 能 存在 的 最 大 风险 在 于 : 

如 果 使 用 预 处 理工 具 来 隐藏 前 级 属性 , 那 代码 的 写作 者 会 忘记 他 们 在 使 用 实验 性 的 

不 稳定 的 特性 ， 因 此 ,会 把 他 们 所 使 用 的 特性 当 作 一 个 已 经 非常 稳定 的 特性 。 

尽管 使 用 剂 览 絮 前 级 的 重复 代码 非 第 罕 重 ,但 根据 一 个 标准 属性 生成 不 同 放 览 絮 前 级 属 
性 的 方式 所 造成 的 不 一 致 性 将 会 更 加 屈 人 。 而 且 随 着 标准 的 演进 ， 你 就 能 够 移 除 那些 广 蜗 强 
前 级 属性 从 而 让 样式 表 更 干净， 而 不 用 一 下 修补 样式 表 ， 仪 仪 因为 一 个 无 前 级 的 属性 突然 变 
成 了 非 标准 属性 。 让 我 再 次 引用 一 下 Eric Meyer 的 文章 吧 ， 他 也 提 到 过 这 种 临时 前 级 究 况 会 
AS Ue 

它 有 点 像 疫苗 注射 的 时 候 是 真 的 会 痛 没 锚 ， 但 相对 于 所 能 够 免疫 的 疾病 来 说 ， 

那 真 算 不 了 什么 ， 就 这 个 例子 而 言 ， 你 能 够 对 一 个 坏 的 情况 免疫 ,不 用 持续 地 做 预 处 理 

优化 和 浏览 器 探测 。 我们 只 用 一 次 就 避免 了 一 个 巨大 的 危害 。 正确 的 使 用 前 级 能 够 避免 

在 一 段 长 的 时 间 后 突然 爆发 的 问题 。 
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提示 。， 当 你 想 要 从 CSS 里 删除 菜 个 前 缓 时 ， 你 可 以 使 用 正则 表达 式 来 帮 你 完成 这 个 工作 ， 请 参 omm 


阅 www.venturelab.co.uk/devblog/2010/07/vendor-prefixes-what-happens-next, 


前 级 的 另外 一 个 问题 是 它们 不 能 通过 验证 。 KDE EAA, 验证 仅 仪 是 为 了 帮助 我 们 
发 现 回 题 。 因 此 如 琳 你 知道 使 用 前 级 时 为 什么 会 有 错误 提示 ， 只 要 名 略 提 示 束 可 以 了 。 但 是 当 这 
种 “ 民 性 ”的 错误 混杂 在 普通 的 错误 中 时 ， 很 难 发 现 真正 的 错误 。 

为 了 解决 包括 重复 代码 和 不 能 通过 验证 在 内 的 这 些 问 题 ， 有 些 人 把 前 级 属性 和 正常 的 样式 表 
放 在 不 同 的 文件 里 。 通 过 这 种 方法 ， 主 要 的 样式 表 还 能 继续 通过 验证 (当然 样式 表 中 还 可 能 有 其 
他 错误 ) 。 但 是 包括 我 在 内 的 很 多 CSS 开发 者 并 不 喜欢 这 个 解决 方案 。 首先 , 它 会 增加 一 个 HTTP 
请 求 , 相对 于 在 样式 表 中 增加 几 字 区 而 言 , 一 个 额外 的 HTTP 请 求 肯 定 对 性 能 的 影响 更 大 。 其 次 ， 
"cibi. 既然 它们 相对 于 正和 的 特性 而 言 更 需要 关 广 ,， 那 给 予 它 们 更 
多 的 关注 显然 很 必要 。 如 果 一 个 浏览 絮 改 变 了 它 的 某 个 前 级 特性 的 表现 , 那 你 就 需要 马上 更 新 样 
式 表 来 保持 一 致 。 或 者 当 你 想 简单 地 了 解 一 下 为 什么 有 些 特性 会 表现 成 某 个 特定 形式 的 时 候 ， 可 
能 会 志 记 你 还 使 用 了 陈旧 的 前 级 样式 表 ， 而 花费 很 多 时 间 去 跟踪 问题 。 因 此 非常 遗憾 地 说 ， 相 对 
于 为 前 级 属性 保留 一 个 独立 的 样式 表 文 件 而 言 , 由 于 前 级 属性 而 导致 样式 表 不 能 通过 验证 的 问题 
严重 程度 显然 要 轻 很 多 。 

尽管 有 这 些 问 题 ， 大 部 分 CSS 开发 者 也 还 都 喜欢 前 级 属 性 ， 并 且 受 益 于 它 ， 正 如 前 面 所 说 ， 
正确 使 用 这 些 特性 就 会 利 大 于 浆 。 

3. 使 用 浏览 器 特定 属性 的 正确 方法 

使 用 浏 蜗 如 前 级 属性 的 时 候 ， 应 该 总 是 包 伟 无 前 级 的 属性 并 将 它 放 在 最 后 。 这 就 可 以 确保 当 
A Sd, a8 n] LA SC EZC B ZR B ES PERSE, 这 个 属性 就 能 够 生效 。 前 级 属性 因为 位 置 徘 前 从 而 会 被 徘 后 的 
无 前 级 属性 所 重 载 ， 这 才 是 正确 的 行为 。 

举例 来 说 ， 在 Safari 5 发 布 之 前 ，Safari 使 用 -webkit-border-radius 属性 。 它 人 确实 曾经 
很 好 用 ,但 它 的 实现 从 很 多 方面 来 看 是 不 正确 的 (因为 W3C 重 定义 了 规 苑 以 后 ， 它 就 开始 不 正 
确 了 )。Safari4 及 之 前 的 版 本 不 允许 单独 定义 每 一 个 圆 角 , 但 是 W3C 的 定义 说 应 该 可 以 这 样 做 。 
它 还 使 用 了 错误 的 语法 来 定义 曲线 的 弧度 。 

但 这 是 没 问题 的 。 你 可 以 保持 -webkit -border-radius 属性 中 包含 的 错误 语法 ， 这 对 其 
他 非 Webkit (il 5i, 25H; Sca ^n n] LAY, MÆ Safaris 中 ,使 用 标准 属性 border-radius 以 及 正确 
的 语法 可 以 实现 贺 角 特性 。 其 至 都 无 需 修改 样式 表 。 标 准 属性 已 经 在 那里 了 ， 正 在 等 竺 使 用 ， 

虽然 我 们 说 应 该 总 是 在 最 后 才 包 含 标准 属性 , 不 过 可 能 在 有 些 情况 下 , 我 认为 应 把 标准 属性 
留 空 ， 只 使 用 说 跑 给 特定 的 属性 版 本 。 如 采 这 个 属性 的 规范 定义 还 在 不 断 变更 ， 建 议 等 它 更 称 定 
时 再 把 其 标准 属性 包含 进去 。 当 规 泡 最终 确 定 ， 六 贤 强 开始 使 用 标准 属性 的 时 候 ， 这 个 特定 属性 
很 可 能 会 被 包 略 或 者 淘汰 ， 像 这 种 情况 ， 就 没有 必要 包含 这 个 属性 。 

一 个 很 好 的 例子 就 是 CSS3 HE HITE, (E98 2 革 中 ， 你 会 了 解 到 这 个 CSS3 的 语法 还 
SEAT, Firefox 和 Webkit 在 训 览 代表 绥 属 性 中 使 用 了 完全 不 同 的 语法 。 这 也 许 会 让 你 决定 根本 
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号 不 使 用 痢 变 效 末 ,但 从 另外 一 方面 来 说 ， 它 只 是 纯粹 的 视觉 效 有 末 ,， 不 会 对 其 他 训 览 红 产 生 人 负面 
影响 ,也 许 你 只 是 打算 把 它 用 在 实验 性 的 网 站 或 个 人 网 站 上 ， 比 如 说 iPhone App。 即 使 面临 语法 
变更 的 风险 也 想 使 用 淘 变 特性 时 ， 较 安全 的 方法 是 仅 使 用 前 缀 版本。 当然 这 样 的 例子 不 常见 ， 因 
为 浏 览 絮 很 少 会 在 语法 定义 都 不 太 完 整 稳定 时 就 推出 一 个 特定 的 前 缀 版 本 ， 即 便 他 们 这 样 做 了 ， 
你 也 会 继续 等 待 更 稳定 的 版 本 。 

另外 一 个 可 选 的 建议 是 当 你 使 用 某 个 辛 览 如 前 级 版 本 的 时 候 ， 最 好 也 加 上 相关 的 其 他 神 览 
絮 前 缀 版 本 的 定义 ， 即 使 你 认为 它们 现在 不 会 被 使 用 ， 你 也 没 法 否认 在 将 来 会 有 这 个 可 能 性 。 
我 对 此 既 不 赞同 也 不 反对 ， 对 我 来 说 ， 这 通 第 要 视 情况 而 定 。 如 果 我 制作 的 网 站 不 需要 我 继续 
WF, ARASH ETE BTA Ol bt as A SEE SC. (EMRE PRA I, RAM 
(CANE ABHESE bs Fe BEY DI Gas BUS, TED BEA (FESS JUR LY BU PPT IEA A 
FEK. 

AE PREFERI PP RUE, E CSS PRIER UDDAT ES EE AAI V, ze PrE FH zi 
远 是 个 好 主意 。 它 其 实 没 有 你 想象 得 那么 明显 。 举 例 来 说 ,， x ULSUR-—2H border-radius 属性 
可 能 会 添加 的 注释 : 


-moz-border-radius: 20px; /* Firefox */ 








-webkit-border-radius: 20px; /* Safari 4 and earlier */ 
border-radius: 20px; /* Opera, Chrome, Safari 5, IE 9 */ 


REET ERE, SURE ATE SCPE BJ DUEB Se T, 就 可 以 很 容易 移 除 那 些 不 再 需要 的 
属性 了 。 


说 阴 在 http://peter.sh/experiments/vendor-prefixed-css-property-overview 页 面 有 一 个 方便 的 表格 
罗列 了 四 大 演 染 引 掌 的 特有 属性 。 通 过 它 可 以 对 比 了 解 哪些 浏览 器 目前 使 用 带 前 级 的 私 
有 属性 ， 哪 些 不 带 前 级 ， 而 哪些 根本 不 支持 相关 属性 。 


1.7.2 处理 不 支持 的 浏览 器 


这 里 没有 单一 的 方法 能 够 处 理 那 些 不 支持 你 所 添加 的 CSS3 属性 的 训 览 右 。 相 对 地 ， 你 选择 
的 方法 取决 于 怎样 才 最 适合 网 站 、 有 用户、 客户 、 你 的 个 人 倾 癌 以 及 CSS3 技术 本 身 。 我 们 会 讨论 
几 个 不 同 的 解决 方案 可 以 用 来 处 理 不 文 持 的 训 览 侣 ,在 本 书 中 , 我 们 也 会 在 恰当 时 使 用 它们 来 解 
决 问题 。 

1. 接受 差异 

在 很 多 情况 下 ， 处 理 不 支持 的 说 虎 右 的 最 佳 方法 就 是 直 接 接受 视觉 表现 上 的 差异 。 这 就 是 
渐进 增强 的 核心 思想 ， 黄 至 在 茶 些 情况 下 ， 你 根本 就 这 无 选择 ， 因 为 确实 可 能 共 些 CSS3 特性 
就 是 疫 有 蔡 代 方 案 。 但 即使 在 那些 能 够 找到 百代 方案 的 情况 下 ， 你 也 应 该 癌 辣 目 己 ， 征 否 真 的 
有 必要 这 么 做 。 这 样 做 能 够 真正 帮助 到 你 的 用 户 吗 ? 它 是 否 会 提高 销售 额 或 者 订阅 量 ， 是 否 能 
实现 网 站 目标 ? 在 某 些 情况 下 ,答案 征 肯定 的 一 一 那么 就 选择 一 个 合适 的 方案 来 解决 差异 。 但 














1.7 明智 地 使 用 CSS3 23 


在 很 多 情况 下 ， 答 案 是 否定 的 ， 因 为 CSS3 效果 只 是 用 于 美化 的 ， 非 必要 的 增强 。 在 有 些 情 况 
F, 添加 额外 的 兼容 方案 反而 会 让 访客 感觉 更 差 ， 比 如 在 旧式 浏览 器 上 添加 尼 景 图 片 会 导致 页 
面 变 慢 。 

大 部 分 CSS3 效果 在 不 被 支持 的 情况 下 根本 就 不 会 对 浏览 器 造成 负面 效果 。Twitter 网 站 
(www.twitter.com) 就 是 个 很 好 的 例子 。Twitter 网 站 的 设计 使 用 border-radius 在 多 个 地 方 创 
建 圆 角 效果 ， 以 及 其 他 一 些 CSS3 特效 ， 这 些 效 果 在 IE 8 及 以 前 版 本 上 根本 不 可 见 。 在 最 新 的 
JE IE {it x E, “What’s happening? ”对 话 框 ， 就 是 输入 微 博 的 地 方 , 是 有 圆 角 效果 的 ， 并且 在 
你 将 鼠标 置 入 输入 框 的 时 候 周 围 会 有 一 圈 蓝 色光 尝 (图 1-8)。 在 正 8 及 之 前 的 版 本 上 ， 这 个 输 
入 框 只 有 直角 ， 也 设 有 光 晕 《图 1-9)。 从 表现 来 看 ， 疫 有 任何 问题 和 错误 ， 仅 仅 是 不 同 而 已 。 这 
些 不 同根 本 不 会 伤害 下 用 户 ， 因 此 对 于 Twitter 来 说 ， 没 有 任何 必要 去 做 额外 的 工作 来 保证 一 致 
的 表现 。 





Cutter Home Profile Fir ewitter Home Profile Find 


What's happening? 
| 


Whats happening? 
| 








Add your location Add your location 





Latest: | may have posted this back when t came out, but t's worth 
posting again. Excellent article on browser prefixes 


Latest: | may have posted this back when it came out, but it's worth 
posting again. Excellent article on browser prefixes. http://icio.us 


Ipw2e1j about 11 h http://icio.us/pw2e1j about 11 | 





1-8 Twitter Æ Firefox 下 的 表现 1-9 Twitter 在 正 下 的 表现 


但 是 也 存在 一 种 可 能 性 ， 当 你 不 能 提供 一 个 可 选 方案 的 时 候 ， 不 支持 的 浏览 融 用 户 会 受到 
损害 。 举 例 来 说 ， 如果 你 在 制作 背景 图 片 的 时 候 使 用 半 透 明 的 颜色 如 HSLA 或 者 RGBA (这 两 个 
声明 颜色 的 方法 只 有 CSS3 才能 支持 )， 不 支持 CSS3 的 浏览 器 将 会 什么 颜色 都 不 显示 ， 所 以 会 
导致 背景 完全 透明 。 此 时 如 有 朱文 本 的 颜色 和 实际 的 背景 色 定 义 不 当 ， 整 个 文本 将 完全 无 法 阅读 
(图 1-10)。 在 这 种 情况 下 你 无 法 忽视 差异 ， 必 须 解决 这 个 问题 。 


Lorem ipsum dolor sit amet consectetur 
adipiscing elit. Fusce eget dui augue. Duis 
nisi diam, pretium a aliquam ut, vehicula eu 


orci. Suspendisse leo odio, interdum ac 
dignissim ut, viverra id arcu. Morbi non 
risus magna, at commodo urna. 





1-10 Firefox F, MAA Hx, IE 8 PICA ACH a LA n] OL 


因此 ， 正 如 之 前 的 CSS ARABIA ABE, Se Oates A Eas PET MIN, AHEM 
定 应 该 选择 哪 种 方案 。 通 前 情况 下 的 差异 征 可 以 接受 的 ， 但 也 有 无 法 接受 的 时 候 。 

2. 为 一 个 属性 同时 提供 非 CSS3 和 CSS3 的 值 

在 那些 你 希望 或 者 不 得 不 提供 回 滚 方案 的 情形 下 , 可 以 只 为 同一 条 规则 提供 多 于 一 个 的 属性 
E: 第 一 条 是 为 不 支持 的 六 蜗 如 准 备 的 ; 第 二 条 ，CSS3 REE, ce Al de). AN 
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持 的 训 览 代 会 忽略 那些 它们 不 能 理解 的 属性 ， 而 高 级 训 览 右 则 会 用 第 二 条 值 去 重 载 第 一 条 的 值 。 
举例 来 说 ， 在 之 前 提 到 的 那个 背景 色 不 存在 的 例子 里 ， 你 可 以 先 提供 一 个 HEX 颜色 值 作为 
备 选 方案 ， 然 后 提供 HSLA 或 者 RGBA 的 颜色 值 ， 例 如 这 样 : 


div { 

background: $CC0000; 

background: hsla(0, 100%, 40%, 5); 
} 


请 广 意 ， 像 这 样 的 方法 实际 上 很 难 模拟 CSS3 属性 所 能 达到 的 表现 或 者 行为 一 一 备 选 方案 的 
颜色 是 实心 的 ， 而 非 半 透明 。 但 是 它 确 实 提 供 了 一 种 可 以 接受 的 选择 ,不 支持 的 训 览 右 的 用 户 至 
少 可 以 正和 使 用 这 个 页 面 了 。 

3. 使 用 Modernizr 检测 CSS3 支持 

即便 你 希望 使 用 不 同 的 值 让 不 支持 CSS3 kt CSS3 的 浏览 絮 都 可 用 ， 那 也 并 不 总 是 能 在 
同一 规则 中 指定 不 同 值 的 ,不 是 每 种 情况 都 像 上 面 提 到 的 那个 背景 例子 一 样 。 在 某 种 情况 下 ， 两 
个 不 同 的 值 会 导致 月 视 。 或 者 即便 它们 不 崩 祝 ,但 你 希望 提供 完全 不 同 的 或 者 更 具 扩 展 性 的 样式 
给 旧式 浏览 器 ， 而 且 不 希望 CSS3 浏览 器 加 载 和 解析 这 些 样式 。 

PRATER Dias tel, dictate, ATMA Pr f FERRI tes, Ala AA TAO V, ae EI 
建 不 同 的 规则 。 但 那 是 不 可 徘 的 , 而 且 有 点 乱七八糟 。 一 个 更 好 的 解决 方案 是 一 个 名 为 Modernizr 
的 脚本 ， 可 以 从 www.modernizrcom Pak, ‘EA FIFA PHI UE ax CSS3 fd HTMLS 特性 的 支 
持 程 度 ， 然 后 会 对 html 元 款 添 加 一 些 类 来 表明 当前 剂 览 各 是 否 支 持 某 些 特性 ， 比 如 
“no-multiplebgs” RN Vi as 3c FFE cs LAA S Ae Al A, “multiplebgs” NANI bias 
是 支持 的 。 

当 这 些 类 加 入 时 ， 可 以 很 容易 地 为 每 个 类 编写 特定 的 样式 ， 而 且 能 够 确保 每 个 样式 只 会 被 支 
持 的 浏览 红 识 别 。 下 面 的 规则 就 用 来 为 浏览 历 添 加 不 同 的 背景 颜色 或 图 片 , 当然 这 取决 于 浏 贤 器 
是 否 支持 这 些 特性 : 

#wrapper { 

background-color: #ccc; 











background-image: url(one.png), url(two.png), 
url (three.png); 
} 
.no-multiplebgs #wrapper { 
background-image: url(alternate.gif); 


95 — AUT AAA DUE bas n] AL. ANE Ee Gc FF JavaScript ice BHF CSS3。 不 文 持 多 
BU az eA GE ee MLF RRS EHZ sk oe A. xF JavaScript [RAN Sc 
FS A ee I DUE, a UIST PRA, “EAT REHAN FP te DERI] FÉ. E. Ar rd EA SC PAY 
三 张 图 片 。 所 以 不 管 浏 览 器 支持 哪个 级 别 的 CSS， 也 不 管 它 是 否 能 够 支持 JavaScript， 它 都 能 够 
显示 一 个 正常 的 背景 。 

对 大 部 分 情况 来 说 ，Modernizr 是 给 不 支持 的 训 览 右 提 供奉 代 性 (而 不 是 模拟 ) 样式 表 的 最 
佳 选 择 。 但 茶 些 情况 下 你 也 可 以 用 它 提 供 对 CSS3 表现 和 行为 的 模拟 。 淮 例 来 说 ， 如 末 你 想 为 盒 
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容器 提供 圆 角 支 持 , 可 以 在 某 些 浏览 器 下 使 用 border-radius, 同时 在 不 支持 border-radius mS 


HD, si MEHE E RSL 


div { 
-moz-border-radius: 10px; 
-webkit-border-radius: 10px; 
border-radius: 10px; 





} 
.no-borderradius div { 
background: url(corners.git); 


} 


说 明 实际 上 no-borderradius 类 的 规则 定义 将 比 上 述 代 码 更 为 复杂 ， 因 为 你 需要 单独 为 每 
个 边 角 图 片 进行 定位 ， 有 可 能 需要 针对 多 个 HTML 元 素 进行 定义 。 我 简化 上 述 CSS 代码 
的 目的 就 是 为 了 更 多 关注 Modernizr 发 挥 的 作用 。 


Modernizr 是 一 个 强 有 力 的 资源 ， 我 推荐 Frank Ates 的 文章 “使 用 Modernizr 来 获得 HTML5 
和 CSS3 的 优点 ” (www.alistapart.com/articles/taking-advantage-of-html5-and-css3-with-modernizr) ) , 
你 可 以 在 这 里 找到 更 多 的 例子 ， 也 可 以 了 解 到 如 何 利 用 Modernizr 29 [zs] DU o zs XE MEAE 
兼容 性 问题 。 
4. 使 用 JavaScript 模拟 CSS3 
我 们 提供 的 额外 ———— bh ae te Pee ae s. ERLT, 
Hs sedi HES 1673 SST RRE., (Ae TUR prets ES RSC EBL, RS 
模拟 工作 。 
JavaScript 通 负 能 够 使 得 不 支持 的 浏览 三 实现 和 高 级 剂 览 右 一 样 的 效 末 ， 例 如 现在 已 经 有 很 
多 脚本 实现 圆 角 效果 了 。 
在 本 书 的 每 一 草 , 我 们 都 会 介绍 一 些 相应 的 脚本 来 完成 类 似 的 工作 , 还 有 一 些 流行 的 脚本 其 
至 不 会 只 是 模拟 某 个 特性 ， 它 们 能 完成 很 多 的 CSS3 模拟 任务 。 
OIE 7, Dean Edwards 出 品 (http://code.google.com/p/IE 7-js)。 让 CSS3 伪 类 和 属性 选择 器 
在 下 6 到 下 8 系列 浏览 右 中 正 芝 工作 。 同 样 模拟 了 box-sizing 和 opacity 属性 ， 也 
包括 一 些 旧版 本 LE. DI, PTA Sc RAY CSS2.1 属性 的 模拟 。 
D Selectivizr，Keith Clark 出 品 (http://selectivizr.com), ik CSS3 伪 类 和 属性 选择 器 在 IE 6 
到 IE 8 AVM teas FE CE. EAA JavaScript 库 协 同 工 作 。 
D cssSandpaper,Zoltan Hawryluk HE m (www.useragentman.com/blog/csssandpaper-a-css3-javas- 
cript-library) ， 能 够 实现 2D BIB, box-shadow, Wa. AAH, RGBA 和 HSLA Æ IE 
TUB fb Se ERU gs P E SS LE, 
O PIE, Jason Johnston 出 品 (http://css3pie.com) , ib border-radius, box-shadow, #4 
At. background-origin, back-ground-clip AURE IE 6 2] TE 8 中 正常 工 
作 。 它 对 border-image 和 RGBA 也 提供 了 有 限 文 持 。 














26 第 1 章 CSS3 的 来 龙 去 脉 


说 明 本 书 出 版 之 后 ， 新 的 脚本 还 将 继续 涌现 。 想 要 获取 最 新 CSS3 的 功能 模拟 脚本 ， 请 访问 


www.stunningcss3.com/resources , 


5. IE 滤 镜 
另外 一 个 模拟 CSS3 但 是 不 使 用 JavaScript 的 方法 是 ， 使 用 微软 提供 的 滤 镜 在 样式 表 中 创建 
不 同 的 视觉 效 末 。 这 当然 只 能 在 IE 中 工作 ， 通 第 是 通过 独 有 的 属性 滤 镜 或 者 -ms-filter 属性 
来 实现 。 具 体 的 属性 滤 镜 语法 则 依赖 于 你 所 使 用 的 特定 滤 匀 ， 但 它们 通用 的 格式 是 一 样 的 : 
filter:progid:DXImageTransform.Microsoft.filtername(sProperties), 这 里 “filtermame” 
是 滤 镜 有 的 名 字 ， 而 “sProperties” 是 它 的 值 。 在 下 8 中， 这 个 语法 升级 成 了 -ms-filter 作为 属 
性 名 ， 你 也 应 该 用 引 吉 来 包 历 它 的 属性 值 。 在 第 2 章 中 ， 可 以 看 到 这 些 害 镜 的 例子 。 
完整 的 可 用 滤 镜 列表 可 以 参见 这 里 : http://msdn.microsoft.com/en-us/library/ms532853%28v= 
VS.85%29.aspx。 下 面 列 出 的 这 些 特 性 是 可 以 用 来 模拟 CSS3 效果 的 。 
口 DropShadow, Shadow, Glow 和 Blur JE n LL AREAL box-shadow 和 text-shadow, 
O Gradient 滤 镜 可 以 用 来 模拟 RGBA, HSLA f£ PEU AE BCR 
UO Alpha 和 BasicImage iE Ez RETAN] opaticy 效果 。 
O Matrix 和 Basiclmage 滤 锐 能 模拟 2D 变形 效 朱 。 
üE SER Rae CA ee JavaScript 并 且 只 在 正中 有 效 , A REA Và as eH Se Bee ET, 所 
以 很 容易 应 用 。 但 它们 也 有 如 下 的 一 些 缺 点 。 
口 长 度 。 描 述 一 个 滤 镜 将 会 花费 很 多 字符 。 如 果 你 在 一 个 样式 表 中 使 用 很 多 滤 镜 ， 会 显著 
增 大 这 个 样式 表 的 大 小 。 为 了 克服 这 个 ， 需 要 将 这 些 样式 放 在 一 个 单独 的 文件 里 面 ， 使 
用 下 条 件 表达 式 来 ?| 入 它 ， 关 于 这 个 方式 我 们 会 在 稍 后 提 到 。 通 过 这 个 方式 ， 至 少 不 需 
T CWA RNS TREINE. 
O 无 法 通过 验证 。 包 含 滤 镜 的 样式 表 是 无 法 通过 验证 的 。 当 你 明确 知道 这 一 点 时 ， 它 也 不 
会 古 一 个 问题 。 但 如 琳 这 让 你 很 烦 屈 ， 可 以 将 这 些 滤 镜 放 在 IE-only 的 文件 里 面 从 而 保 
证 至 少 你 的 主 样式 文件 是 可 以 通过 验证 的 。 
口 性 能 。 滤 镜 会 让 页 面 的 加 载 速 度 变 慢 ， 并 且 消 耗 大 量 的 内 存 。 
O 粗粮 的 字体 。 滤 镜 会 关闭 Windows 的 ClearType 泻 染 ， 因 此 文本 显示 将 不 再 是 抗 锯 齿 的 ， 
这 让 文本 看 起 来 非 第 粗糙 。 
口 其 他 缺陷 。 滤 镜 偶尔 还 会 触发 正中 的 其 他 缺陷 ， 举 例 来 说 ， 在 第 2 章 ， 你 会 看 到 一 个 滤 
rive ANAL LE CSS 产生 的 内 容 消 失 的 。 
TEA Axe a, 我 建议 只 有 在 真正 需要 的 情况 下 才 使 用 小 镜 。 使 用 时 要 谨慎 ,并 且 做 完整 
的 测试 。 


1.7.3 ”使 用 条 件 表达 式 过 波 |E 


通常 来 说 ， 唯 一 需要 提供 特定 兼容 方案 的 议 蜗 如 就 是 IE 6 到 IE 8 系列 ， 所 以 需要 好 的 方 
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法 可 以 单独 为 下 提供 样式 表 或 者 脚本 (或 者 反 过 来 对 TE. 隐藏 一 些 东 西 ) 。 你 可 能 早已 经 这 人 么 做 
了 ,单独 照顾 TE 可 不 是 CSS3 提供 的 新 内 容 。 但 如 果 你 需要 重 瘟 一 下 ,这 一 市 会 提供 儿 种 方法 来 
单独 定位 IE, 

利用 正中 CSS 的 缺陷 来 定位 匡 是 最 古老 的 技巧 ,有 很 多 人 还 在 使 用 。 最 流行 的 也 是 最 有 用 
HJ IE Hack 就 是 星 号 符 (http://css-discuss.incutio.com/wiki/Star Html Hack) 和 下 划 线 (http://wellsty- 
led.com/css-underscore-hack.html), ix4€ Hack 的 优点 是 它们 能 乖乖 地 竺 在 你 的 主 样式 表 中 ， 需 要 
改变 或 者 跟踪 定位 时 能 很 容易 地 发 现 它 们 ， 它 们 也 不 会 增加 额外 的 HTTP 请 求 。 当 然 ， 它们 中 的 
一 些 是 没 法 通过 验证 的 ,添加 它们 也 会 导致 所 有 训 览 娟 的 样式 表 都 膀 胀 。 除 此 之 外 ， 除 非 你 能 够 
清晰 地 记 住 , 否则 会 较 难 区 分 到 底 是 哪个 浏览 强 使 用 了 哪个 值 ， 这 会 让 和 你 同一 个 团队 的 开发 者 
很 难 修改 你 的 代码 。 

因为 这 些 原因 ， 大 部 分 的 CSS 开发 者 都 使 用 条 件 注 释 来 定位 正 。 条 件 注释 是 一 个 特定 的 只 
能 被 IE 所 识别 的 HTML 注释 格式 。 它 们 是 合法 的 HTML， 所 以 对 其 他 浏览 各 不 会 造成 任何 损 
E, MAJE IE N tame BI C, 1. RIN Ee HTML 注释 一 样 ， 条 件 注释 能 够 让 你 
编写 只 被 TE 甚至 是 IE 的 某 个 特定 版 本 所 使 用 的 HTML, 

但 我 们 不 是 希 户 IE BEBE FH CSS 特有 的 样式 表 , 而 非 HTML 吗 ? 没 错 , 条 件 注释 能 够 轻松 地 
通过 几 种 不 同 的 方法 来 实现 这 个 效果 。 


说 明 用 条 件 注释 来 加 载 用 于 修复 下 缺陷 的 脚本 也 不 失 为 一 个 好 想法 。 比 如 上 文 所 列举 的 那些 
只 针对 正 的 脚本 ， 其 他 浏览 器 不 会 下 载 这 些 脚 本 。 


1. 提供 IE 独 有 的 样式 表 
第 一 种 方法 是 ， 通 过 在 条 件 广 释 中 放置 一 个 link 标签 或 者 aimport 指示 符 来 5[ 入 一 个 IE 
独 有 的 样式 表 ， 从 而 适 配 所 有 版 本 的 正 ， 就 像 这 样 : 


<!--[if IRIS 
«link rel="stylesheet" href-"ie all.css" type="text/css"> 
«'[endif]--» 


在 这 个 样式 表 中 ， 你 可 以 在 必要 的 情况 下 使 用 Hack 来 适 配 不 同 版 本 的 下。 然而 ， 当 E9 tH 
现 后 ， 它 会 更 好 地 支持 标准 ， 界 时 你 可 能 不 希望 下 9 也 使 用 这 些 IE Hack。 为 了 避免 这 种 情况 ， 
可 以 这 样 编写 条 件 注 释 ， 保 证 只 有 正 8 及 之 前 的 版 本 才 会 使 用 这 个 样式 表 : 

<!--[if lte IE 8]> 


<link rel="stylesheet" href-"ie lte8.css" type="text/css"> 
«'[endif]--» 


在 这 里 ，1lte 代表 了 “小 于 或 者 等 于 。 其 他 可 能 的 值 有 1t 代表 “小 于 ，gte 代表 “大 于 
或 者 等 于 ，gt 代表 “大 于 。 

相对 于 只 使 用 一 个 契 样 式 表 ,为 外 一 个 选项 是 使 用 多 行 条 件 注 释 为 每 一 个 正版 本 提供 一 个 
特定 的 样式 表 ， 束 像 这 样 : 
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<!--[if IE 6]> 

<link rel="stylesheet" href-"ie 6.css" type="text/css"> 
«l[endif]--» 

<!--[if IE 7] 

«link rel="stylesheet" href="ie_7.css" type="text/css"> 
<! [endif]--> 

<!--[if IE 8]> 

<link rel="stylesheet" href="ie_8.css" type="text/css"> 
<! [endif]--> 





这 样 就 无 需 在 样式 表 中 使 用 任何 Hack 了 ,但 古 这 可 能 会 有 点 难以 维护 。 


条 件 注释 的 缺点 


虽然 条 件 注 释 在 区 分 正方 面 很 棒 ， 但 它 还 是 有 缺点 。 


E 


E 


额外 的 HTTP 请 求 。 每 个 额外 的 样式 表 都 会 导致 一 个 额外 的 对 主机 服务 器 的 请 求 ， 这 
会 拖 慢 页 面 。 

对 单一 对 象 的 规则 定义 将 会 分 散在 多 个 位 置 。 这 将 会 增加 调试 问题 的 时 间 (也 更 容易 
iLAGHGA). ， 得 花 点 时 间 才 能 回忆 起 你 在 另外 一 个 样式 表 文 件 里 也 对 这 个 对 象 做 了 定 
义 。 之 后 如 果 你 需要 对 样式 表 做 些 变更 的 上 时候， 也 容易 忘记 把 这 个 变更 同步 到 IE 独 有 
的 样式 表 里 面 去 。 

阻塞 资 源 文件 在 IES 下 的 并 行 下 载 。 使 用 条 件 注 释 将 会 导致 IE8 阻 塞 其 他 资源 文件 的 
下 载 ， 直 到 主 样 式 衣 下 载 完 成 。 这 跟 你 到 底 在 适 配 哪 个 版 本 的 下 浏览 器 无 关 ， 也 跟 你 
是 否 用 条 件 注 释 链 入 CSS 文件 无 关 ， 这 个 缺陷 是 IE8 与 生 俱 来 的 ， 也 是 影响 非 第 坏 的 
一 个 ， 它 会 明显 增加 页 面 的 加 载 时 间 。 唯 一 的 解决 方法 是 在 主 样式 表 文 件 前 面 增 加 一 
个 空 的 条 件 注释 ， 或 者 在 html 标签 下 使 用 条 件 注 释 而 不 是 到 处 使 用 。 之 后 我 们 会 详 
细 讨 论 这 个 解决 方案 。 关于 这 个 缺陷 的 更 多 信息 ,请 和 参见 www.phpied.com/cond-itional- 


comments-block-downloads, 


2. 对 IE 不 有 可见 


条 件 注释 也 可 以 用 来 使 内 容 对 E 不 可 见 ， 而 不 仅仅 是 为 它 提 供 特 定 内 容 。 这 





downlevel-revealed 条 件 注释 〈 虽 然 这 可 不 是 个 非常 有 帮助 的 名 字 )。 语 法 如 下 : 


epe 


[if !IE]»---» 





<link rel="stylesheet" href-"not ie.css" type="text/css"> 
<!--<![endif]--> 


IE 前 面 的 “! EMAER IE 它们 不 应 该 使 用 广 释 之 中 的 任何 内 容 ， 直 到 结 





这 个 语 


何 的 <! [endif], 
这 一 次 ， 所 有 的 非 IE 浏览 姻 是 可 以 正确 使 用 这 注释 之 中 的 内 容 的 ， 因 为 这 个 注释 的 开始 和 
结束 都 是 独立 和 完整 闭合 的 广 释 标记 ， 以 下 是 非 正 训 览 红 实 际 看 到 的 内 容 : 


二 二 


stuff that doesn't concern me, and now the comment is 


over and I should start parsing again --> 
<link rel="stylesheet" href="not_ie.css" type="text/css"> 


sles 


more stuff that doesn't concern me, and now this comment is over --> 
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看 到 每 个 注释 是 如 何 独 立地 闭合 语句 的 了 吗 ? 没有 任何 理由 六 览 融会 忽略 注释 之 外 的 
HTML 内 容 ，IE 之 所 以 名 上 略 它 古 因为 它 被 设计 能 够 理解 这 个 独特 的 语法 。 
你 也 能 针对 特定 版 本 的 IE fii H] downlevel-revealed 条 件 表达 式 ， 就 如 这 样 : 


<!--[if !IE 6]>--> 
<link rel="stylesheet" href-"not ie6.css" type="text/css"> 
<!--<![f[endif]--> 


说 明 和 欲 获取 更 多 有 关 更 复杂 、 更 巧妙 的 条 件 注 释 语 法 ,请 参阅 Louis Lazaris ht 4449 “Things You 
Might Not Know About Conditional Comments” — x: (www.impressivewebs.com/conditional- 


comments) , 


3. 在 html 标签 上 添加 IE 版 本 类 

男 外 一 个 使 用 条 件 表达 式 的 方法 是 不 用 它 链接 正 独 有 的 样式 表 文 件 ， 而 是 用 它 为 html 标签 
添加 一 些 类 来 指明 当前 具体 是 哪 一 个 IE 版 本 的 浏览 器 ， 然 后 你 就 可 以 在 主 样式 表 中 为 每 个 类 添 
加 特定 的 属性 。 这 个 技术 还 不 第 见 ， 但 是 自从 Paul Irish 在 他 2008 年 的 博文 中 提 到 以 后 就 开始 流 
行 起 来 (http:/paulirish. com/2008/conditional-stylesheets-vs-css-hacks-answer-neither)。 具 体 的 代码 
如 下 : 





<!--[if lt IE 7]» «html class="ie6" lang="en"> <![endif]--> 
<!--[if IE 7]» «html class-"ie7" lang="en"> «![endif]--» 
<!--[if IE 8]> <html class-"ie8" lang="en"> <![endif]--> 
<!--[if IE 9]> <html class-"ie9" lang="en"> <![endif]--> 
<!--[if gt IE 9]» <html lang="en"> <! [endif]--> 

<!--[if !IE]»--» <html lang="en"> <!--<! [endif]--> 














说 明 上 述 代码 中 标签 之 间 的 空格 是 为 方便 阅读 而 设 。 如 果 需 要 ， 你 可 以 在 页 面 中 删除 它们 。 


为 何 是 html 标签 

如 果 你 愿意 ,也 可 以 把 这 些 类 添加 到 body HARA AA div 上去, 而 不 是 html 标 
签 ， 其 实 只 要 是 页 面 上 一 个 能 够 包 训 其 他 所 有 元 素 的 标签 就 可 以 。 

但 是 html 标签 有 它 特 有 的 优点 : 不 会 阻塞 IE8 下 面 的 样式 表 的 并 行 下 载 (如 我 在 之 前 所 
解释 过 的 那样 ) 。 如 果 是 body 或 者 div 标签 就 没 法 解决 这 个 问题 ， 除 非 你 再 额外 添加 一 个 空 
的 条 件 注释 到 主 样式 表 文 件 之 前 。 

值得 一 提 的 是 在 HTML4 fe XHTML 标准 中 ， 类 是 不 能 被 添加 到 html 标签 上 的 。 这 就 
是 为 什么 这 种 技术 会 让 页 面 没 法 通过 验证 ,但 是 在 HIMLS 下 是 可 以 这 样 做 的 ,幸好 本 书 中 全 
部 使 用 的 都 是 HTMLS 文档 类 型 ! 
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逐 行 审查 代码 的 工作 量 有 些 大 , 但 做 起 来 非常 简单 。 每 一 行 都 简单 明了 地 指明 了 一 个 不 同 的 
正版 本 ， 以 及 不 同 的 html 标签 。 举 例 来 说 ， 如 果 在 正 6 下 查看 ， 它 会 作用 于 条 件 注释 It IE 7, 
说 “你 好 ， 我 是 正 7 之 前 的 版 本 ， 我 会 使 用 这 里 面 的 内 容 ! ”最 终 就 会 得 到 一 段 HTML: <html 
class="IE 6" lang="en">。IE6 会 发现 之 后 的 条 件 注 释 是 不 匹配 的 ， 所 以 它 就 会 跳 过 这 些 往 
释 ， 然 后 一 直 解 释 到 页 面 尾 部 。 这 个 过 程 在 每 个 IE HRA Shas PABST AE, BET bas 
都 会 获得 唯一 的 html 标签 ， 这 个 标签 上 会 添加 一 个 类 来 指明 当前 的 正版 本 。 

JE IE 浏览 絮 会 名 略 所 有 的 条 件 注 释 ， 因 此 它们 会 名 略 前 5 行 。 第 6 行使 用 了 downlevel- 
revealed 条 件 注释 ， 所 以 只 有 韭 IE Hotes TA. AE, JE IE dota RAE AAT, 
简单 而 没有 添加 类 的 html 标签 。 

当 获 得 了 这 段 HTML 内 容 的 时 候 ， 就 可 以 在 你 主 样式 表 里 为 任意 一 个 版 本 的 TE 创建 单独 的 
规则 ， 这 无 需 一 个 独立 的 HTTP 请 求 ， 也 能 保证 你 的 样式 都 在 同一 个 位 置 ， 方便 跟 踪 和 调试 。 你 
也 不 需要 使 用 Hack， 也 无 需 担 心 非 了 正六 览 红 会 看 到 什么 本 不 应 该 看 到 的 。 举 例 来 说 ， 如 东 要 为 
不 支持 min-height Hy IE 6 j| i 281R4E— A height 值 ， 只 需要 这 么 做 : 


div { min-height: 100px; } 
.ie6 div { height: 100px; } 


BERS JU TE RUE BILL Ss FE ESATA), x AS BT EH MEE, 顺利 的 话 ， 
你 只 需要 写 一 些 规 如 TE RPA EASA, OA FAS R&A ARALAY Hack, 5h. iif. wt 
性 能 来 说 HTTP 请 求 比 单个 请 求 上 增加 一 点 内 容 更 复杂 , 所 以 总 的 来 说 这 个 技术 对 于 页 面 性 能 和 
开发 维护 两 方面 来 说 部 是 有 效 的 。 

因为 这 些 优 点 ， 我 最 喜欢 最 后 这 个 解决 方案 ， 这 也 是 本 书 所 选择 的 解决 方案 。 当 然 ， 如 采 你 
的 偏好 并 不 相同 ， 你 完全 可 以 选择 自己 喜欢 的 解决 方案 。 


1.8 ”搞定 个子 文 持 的 客户 或 老板 


有 时 成 功 地 使 用 CSS3 最 主要 的 阻碍 反而 不 古 浏 览 强 的 支持 度 ， 而 古来 自 于 客户 或 者 老板 的 
犹疑 。 如 采 你 担心 这 部 分 人 会 反对 使 用 CSS3， 可 参考 以 下 几 种 沫 略 。 


1.8.0 ”有些 事 不 必 说 


让 我 们 先 从 最 简单 的 “ 买 进 ”策略 开始 。 坦 率 地 说 ， 我 认为 可 能 你 的 客户 或 者 老板 根本 不 
需要 知道 你 在 使 用 CSS3 这 个 事实 。 可 以 这 样 思 芳 : BIRR REA EAE HL, Vix 
要 也 不 想 知 道 每 件 工具 和 材料 的 名 字 ， 或 者 这 个 承包 人 所 使 用 的 建造 技术 。 你 也 许 会 关注 茶 些 
技术 细 广 ,但 总 的 来 说 会 更 关注 总 体 效 采 ， 并且 要 确保 目标 是 可 以 用 承包 人 认可 的 最 好 方式 实 
现 的 。 

Web 设计 在 某 种 程度 上 也 和 这 个 类 似 。 这 里 有 各 种 各 样 的 技术 , 但 是 在 实现 它 之 前 你 的 客户 
或 者 老板 根本 无 法 使 用 。 所 以 最 好 的 方式 就 是 选择 最 好 的 工具 并 且 使 用 它 完成 工作 。 涂 例 来 说 ， 
也 许 对 于 实现 一 个 特定 的 动画 效 末 来 说 ， 讨 论 完 竞 使 用 CSS3 动画 还 是 Flash 会 很 有 意义 ， 但 确 
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实 疫 有 必要 询问 客户 他 们 是 更 愿意 用 HSLA 还 是 Alpha 透明 的 PNG 来 实现 半 透 明 的 背景 效 朱 。 
同样 ， 你 也 没有 必要 询 回 是否 要 添加 一 个 text-shadow 特性 来 让 文本 显得 更 好 看 一 点 。 
CSS3 来 实现 有 限 的 视 完 细 市 时 ， 可 以 目 己 决 定 是 否 使 用 ， 然 后 直接 实现 它 。 


1.8.2 ”提前 教 给 他 们 渐进 增强 的 思想 


当 你 还 处 于 一 个 新 项 目的 芜 慰 阶段 时 ， 可 以 莹 试 介绍 一 些 关 于 潮 进 增强 的 知识 。 在 开展 工作 
之 前 ， 确 保 客 户 能 够 理解 渐进 增强 的 基本 理念 , 并 且 知 道 这 对 他 的 网 站 会 产生 怎样 的 影响 。 你 可 
能 需要 展示 不 同 设备 和 训 览 右上 的 视觉 样 例 〈 最 好 是 真实 的 网 站 ) 来 证 明 你 的 观点 。 介 绍 一 下 哪 
种 训 览 右 你 可 以 提供 特别 的 增强 ， 而 哪 种 训 先 代 你 只 会 提供 基本 文 持 。 通 过 对 他 现 有 网 站 的 统计 
或 者 是 新 网 站 的 规划 ， 来 找 出 哪些 训 览 右 对 客户 最 有 价值 。 

当 与 客户 或 者 老板 讨论 痢 进 增强 时 ,没有 必要 涉及 技术 细 贡 ， 倒 是 可 以 谈 谈 在 不 同 的 浏览 硕 
显示 不 同 的 视觉 效 末 契 不 可 避免 的 发 展 趋势 。 为 了 证 明 这 一 氮 ， 你 可 能 需要 从 三 个 角度 来 说 明 这 
个 问题 : DARE, MEHN, AREARE EX. 

BULA RAT, EF TED oR A CSS3 技术 ,能够 减少 整个 项 目 周期 的 开发 时 间 和 后 期 维护 
时 间 ， 也 能 有 效 降 低 成 本 。 你 可 以 展示 CSS3 技术 是 如 何 通 过 减少 外 部 资源 例如 图 片 数 量 和 文件 
大 小 来 方 省 之 宽 成 本 的 。 提 醒 你 的 用 户 为 IE 提供 特殊 支持 是 需要 消耗 成 本 的 ， 也 可 以 询 同 这 样 
做 能 够 获得 的 投资 收益 率 。 

你 可 以 谈 谈 CSS3 能 够 提高 的 用 户 可 用 性 ， 而 这 种 提高 又 是 怎样 让 愉悦 的 用 户 在 网 站 停留 更 
入 ， 这 将 会 市 来 更 多 的 销售 额 、 订 阅 数 或 者 实现 网 站 需要 达到 的 其 他 目标 。 

使 用 你 对 Google 搜索 排名 人 逻辑 的 知识 来 打动 他 们 ， 告 诉 它 们 Google 会 为 更 快 的 网 站 特别 加 
分 ， 然 后 说 明 CSS3 为 何 会 让 网 站 变 得 更 快 。 

总 而 言 之 ， 对 你 的 客户 或 者 老板 强调 新 进 增强 是 符合 他 们 利益 的 ， 而且 事 实 就 古 如 此 。 也 许 
你 的 观点 不 能 被 很 快 接受 ， 但 通过 持续 的 游说 ， 他 们 就 能 更 好 地 理解 如 源 进 增强 这 类 Web 设计 
开发 最 佳 实践 之 所 以 存在 的 潜在 原因 。 有 一 天 这 些 实践 将 会 变 成 主流 ,这 样 你 就 走 在 了 为 用 户 提 
供 最 佳 价值 的 注 流 最 前 沿 。 

















1.8.3 ”控制 客 尸 因 设计 稿 而 生 的 过 度 期 望 


设计 师 经 常会 遇 到 这 样 的 麻烦 事 : 在 给 客户 展示 设计 草图 的 时 候 , 客户 可 能 会 期 望 最 终 的 产 
品 会 在 所 有 浏览 器 上 都 能 具备 设计 稿 中 所 展示 的 效果 ,即使 设计 稿 中 的 某 些 特效 只 能 运用 于 最 新 
的 高 级 浏览 器 ， 你 可 能 还 是 会 被 迫 添加 特殊 的 兼容 方案 或 者 一 些 Hack 来 让 所 有 浏览 器 都 能 展示 
同样 的 效果 。 以 下 有 几 种 方法 能 够 避免 这 样 的 结果 。 

1. 在 浏览 器 中 设计 

避免 不 切实 际 期 望 的 最 佳 方法 是 不 要 使 用 任何 草图 ， 或 者 不 要 把 它 展示 给 客户 。 与 其 用 
Photoshop 或 者 Fireworks 把 你 的 设计 展现 成 为 一 幅 静 态 图 片 ， 倒 不 如 用 HTML 和 CSS 在 最 终 的 
媒介 即 浏览 器 上 实现 设计 。 直 接 展示 给 客户 可 以 操作 的 真实 页 面 。 既 然 展示 的 就 是 他 自己 的 浏览 
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器 中 所 看 到 的 内 容 ， 他 自然 不 会 要 求 浏览 器 所 不 能 支持 的 特性 。 
尽管 这 个 方法 看 起 来 会 花费 更 多 的 时 间 , 但 是 除非 客户 对 你 的 设计 彻底 不 满意 , 要 求 完全 重 
做 ， 否 则 不 出 意外 的 话 这 个 方法 不 会 花费 太 多 时 间 ， 事 实 上 ， 直 接 使 用 HTML 和 CSS 进行 设计 
反而 能 节约 时 间 。 
你 需要 确定 事先 已 经 从 客户 那里 获取 了 足够 多 的 信息 , 已 经 彻底 了 解 了 他 的 期 望 和 品位 , 不 
要 假设 “他 看 到 的 时 候 才 知 是 否 喜欢 "， 直 接 从 他 那里 获取 你 所 需要 的 一 切 。 





更 多 关于 不 使 用 图 形 程序 来 进行 设计 的 细 市 
要 想 获得 更 多 关于 在 浏览 器 中 进行 设计 的 细节 ， 请 参见 以 下 资料 。 
口 “用 标记 来 构建 草图 ”，Meagan Fisher (http://24ways.org/2009/make-your-mockup-in-markup ) 。 
DD “Walls Come Tumbling Down presentation slides and transcript”, Andy Clarke  (http:// 
forabeautiful-web.com/blog/about/walls come tumbling down presentation slides and - 


transcript) , 


因此 ， 在 引入 CSS 工作 之 前 ， 请 使 用 简单 的 线 框 来 规划 所 有 的 页 面 结构 和 布局 ， 这 样 做 的 
话 ， 就 算 客户 不 喜欢 你 所 使 用 的 图 片 、 颜 色 或 者 字体 ， 至 少 所 有 元 素 都 已 经 在 正确 的 位 置 上 了 ， 
这 时 再 修改 就 不 那么 费力 了 。 

事实 上 ， 通 过 编辑 CSS 文件 来 改变 外 观 通常 比 修改 一 个 图 形 草图 要 容易 得 多 。 在 图 形 设计 
程序 中 你 花费 在 抗 锯齿 、 行 高 设 定 和 文本 换行 的 时 间 ， 足 够 在 CSS 中 把 同样 的 事情 做 两 次 ， 而 
有 晶 也 能 更 精准 地 描述 这 个 设计 效果 在 浏览 器 中 的 实际 表现 。 这 也 有 助 于 尽早 发 现 那些 只 有 在 真实 
页 面 中 才 会 发 生 的 问题 ， 能 够 尽早 地 解决 ， 而 不 是 把 它们 保留 在 设计 草图 中 ， 万 一 你 的 客户 很 
喜欢 这 种 问题 设计 ， 他 们 会 强迫 你 花 很 多 时 间 在 真实 页 面 中 具体 实现 这 个 设计 的 。 

在 创意 的 早期 ， 你 还 是 可 以 使 用 图 形 设 计 程 序 来 激发 灵感 ， 或 者 是 用 它们 创作 那些 CSS 无 
法 胜任 的 小 范围 的 复杂 图 像 表 现 。 但 总 的 来 说 ， 使 用 真实 的 样式 工具 CSS 构建 设计 将 会 让 你 的 
工作 更 简单 一 些 。 

除了 这 些 好 处 ， 我 也 明白 在 浏览 器 中 设计 对 于 大 部 分 Web 设计 师 来 说 是 一 个 巨大 的 转变 ， 
但 同时 却 也 是 他 们 的 客户 特别 期 望 的 。 我 承认 我 有 时 也 没 能 这 么 做 。 有 了 时 你 其 至 对 草图 都 没有 控 
制 权 一 一 它们 很 可 能 是 由 其 他 设计 师 分 别 设计 的 ,然后 交 给 你 ， 由 在 浏览 器 中 实现 它 。 如 果 处 于 
无 法 直接 在 浏览 器 中 设计 的 情况 时 ， 可 以 参考 下 面 提供 的 其 他 避免 客户 失望 的 方法 。 

2. 解释 草图 的 局 限 性 

如 果 使 用 传统 的 设计 草图 给 客户 做 展示 , 每 个 页 面 只 能 展示 一 个 视图 的 情况 下 , 请 确保 跟 客 
户 解释 这 只 是 草图 ,不 是 最 终 效 果 。 在 展示 草图 之 前 ,确保 让 客户 知道 静态 图 片 从 来 都 不 能 够 完 
全 精确 地 实现 ， 因 为 它 设 法 展示 训 览 器 中 的 各 种 不 同情 况 、 屏 幕 大 小 、 可 能 的 字体 等 。 要 让 客户 
明白 他 们 所 看 到 的 每 一 个 视觉 细 市 并 不 一 定 能 够 在 所 有 情况 下 都 可 以 展示 , 其 至 包括 他 们 自己 访 
问 的 时 候 。 根 据 不 同 麟 览 器 的 处 理 能 力 的 区 别 ,， 各 人 看 到 的 实际 效果 是 有 轻微 差别 的 , 但 是 你 会 
尽 可 能 地 为 各 个 浏览 器 都 提供 最 佳 的 体验 。 
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3. 展示 可 能 的 情况 mS 
ARREST IRE cee, AREA EAT EA A A LB EROR] A, 例如， 可 以 为 主页 创建 三 种 

不 同 宽度 的 草图 : 480 像素 适 配 移动 设备 ，750 像素 适 配 小 亚 示 左 ，1200 RAGA Aa. dU 

许 你 还 可 以 创建 一 个 草图 来 模拟 正 8 的 表现 ， 比 如 没有 圆 角 支持 和 半 透 明 背 景 的 情形 。 
是 的 ， 这 样 工 作 量 就 更 大 了 。 但 如 采 它 能 帮助 你 避免 那些 不 切实 际 的 期 望 ， 同 时 帮 你 使 用 

CSS3 并 且 获 得 它 的 所 有 好 处 ， 那 么 从 长 远 考 虑 浪费 的 时 间 将 会 廊 省 回来 ， 而 你 最 终 完 成 的 Web 

站 点 也 将 会 有 更 好 的 表现 。 











气泡 对 话 杠 





CSS3 最 简单 有 趣 的 用 途 之 一 便 古 能 为 页 面 履 上 一 层 不 太 起 眼 的 视觉 点 级 ， 从 而 最 终 化 腐朽 
为 神奇 。 我 们 将 用 一 些 最 直观 且 支 持 度 最 广 的 CSS3 属性 来 实现 3D 的 气泡 对 话 框 (Speech 
Bubbles), ， 它 们 可 以 用 来 次 饰 博客 评论 、 突 出 引用 等 。 





你 将 学 到 

我 们 将 实现 一 些 气 泡 对 话 框 ， 不 需要 用 到 图 片 ， 只 会 用 到 如 下 CSS 特性 。 
word-wrap 属性 ， 用 来 容纳 溢出 的 文本 ; 

border-radius 属性 ， 用 来 实现 圆 角 ; 

HSLA 色彩 模式 ， 用 来 创建 半 透 明 的 背景 ; 

linear-gradient 方法 ， 用 来 实现 背景 渐变 ; 

box-shadow 属性 ， 用 来 实现 物件 的 阴影 ; 

text-shadow 属性 ， 用 来 实现 文字 的 阴影 ; 

transform 属性 ， 用 来 旋转 物件 。 


DoOoODOODODOD DOD ODO 


2.1 基础 页 面 


假设 你 正在 着 手 编写 一 个 博客 评论 区 域 的 样式 。 为 了 兼容 那些 不 支持 CSS3 AUD vas, EFF 
始 CSS3 的 创意 构想 之 前 ， 应 该 先 为 页 面 实现 一 些 基 本 样式 。 正 如 第 1 草 所 提 到 的 ， 在 把 CSS3 
效 末 作为 “ 潮 进 增强 ”的 一 部 分 诡 加 到 页 面 中 之 前 ， 重 要 的 是 确保 它 在 那些 不 支持 CSS3 AY bE 
贷 下 能 够 使 用 ， 并 至 少 拥 有 一 个 像样 的 界面 。 

图 2-1 问 我 们 展示 了 一 个 拥有 基本 样式 的 博客 评论 区 域 。 每 则 评论 的 内 容 、 头 像 、 评 论 者 姓 
名 和 日 期 被 整齐 地 罗列 出 来 ,文字 经 过 了 修饰 ， 其 至 还 应 用 了 简单 的 背景 图 和 边框 。 这 个 评论 区 
域 没 有 任何 问题 ， 它 可 用 、 整 洁 ,， MAA RSID. FEE IASC a DAA ABA AU 
为 目 己 遗漏 了 什么 信息 ， 或 者 饥 得 这 个 页 面 “ 破 败 不 堪 。 
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2-1 评论 区 域 尚未 应 用 任何 CSS3 特性 之 前 ( 男 见 彩 插图 2-1) 


但 是 有 了 CSS3 的 帮助 ， 不 需要 增加 任何 图 片 或 是 改动 页 面 结 构 ， 便 可 以 使 页 面 的 展现 生动 
起 来 。 在 开始 之 前 ,请 到 www.stunningcss3.com 下 载 本 章 的 示例 文件 ， 然 后 用 你 心仪 的 代码 编辑 
器 打开 speech-bubble start.html 这 个 文件 。 为 了 便于 编辑 ， 相 关 的 CSS 代码 被 置 于 页 头 的 一 个 
style 标签 里 。 


2.2 包 下 长 文本 


是 的 , 我 知道 我 刚才 提 到 要 让 这 块 评论 区 域 展现 得 更 生动 一 些 , 但 在 我 们 正式 开始 打造 气泡 
对 话 框 的 样式 之 前 ,请 你 跟 我 一 起 快速 地 回顾 一 个 困扰 大 家 已 入 的 文本 格式 问题 , 解决 它 只 需 
用 到 CSS3 里 最 简单 的 一 句 代码 。 

人 们 和 常 在 评论 和 发 帖 时 附 上 URL， 而 这 些 URL 往往 会 超出 文本 容 絮 应 有 的 长 度 (图 2-2), 
如 果 这 些 URL 里 含有 短 横 线 ( 即 “-”)， 所 有 主流 浏览 器 可 以 很 好 地 处 理 URL 的 折 行 ， 然 而 基 
于 Webkit AAI bias 40 IE WEA ERHALT (BD. 7) 时 并 不 会 自动 折 行 ， 而 且 所 有 主流 训 览 右 
遇 到 下 划 线 〈 即 ““) 时 均 不 折 行 。 

在 CSS3 中 ,终于 出 现 了 一 个 简单 方法 来 强制 浏览 器 进行 词 内 折 行 以 防止 文本 溢出 ， 你 所 需 
要 做 的 只 是 给 word-wrap 属性 赋值 为 break-word, 
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I really enjoy reading your blog, 
but what happens when I put a 
4 long URL in my comment text, 
Asha Gillenwater like this one: 

March 10,2010 — http;//forabeautifulweb.com 
/blog/about 


/what does browser testing mean today/ 





2-2 过 长 的 URL 通 稍 会 溢出 其 父 容 器 ， 特 别 是 包含 下 划 线 的 URL 


说 明 让 我 告诉 大 家 一 些 好 消息 : TEFASS 版 本 中 就 支持 了 word-wrap 属性 ， 所 以 事实 上 该 
属性 是 由 微软 创造 ， 随 后 才 被 W3C 接纳 的 。 


word-wrap 属性 的 来 龙 去 脉 

word-wrap 属性 在 “文本 ” (Text) 模块 中 定义 , 你 可 以 在 WWW.w3.org/tr/css3-text 找到 它 。 
它 控 制 着 文本 是 否 可 在 词 内 断 开 ( 与 text-wrap 属性 不 同 , 它 控制 词 间 如 何 折 行 ) word-wrap 
属性 的 取 值 可 以 是 normal (默认 值 ) X break-word, 

除了 强制 断 开 过 长 URL 的 需求 ， 你 还 可 以 将 word-wrap 应 用 在 如 下 场景 中 。 

口 防止 数据 表格 因为 过 宽 而 溢出 或 破坏 布局 ， 请 参阅 www.456bereastreet.com/archive/ 

200704/how to prevent html tables from becoming too wide, 
O 使 pre 标签 里 的 代码 片段 折 行 显示 , 请 参阅 www. longren.org/2006/09/27/wrapping-text- 


inside-pre-tags , 


表 2-1 word-wrap 属性 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


XH 5.5+ 支持 ，3.5+ 支持 支持 支持 


在 speech-bubble start.html 页 头 的 CSS 里 找到 blockquote 规则 ,然后 加 入 word-wrap 属性 : 


blockquote { 
margin: 0 0 0 112px; 
padding: 10px 15px 5px 15px; 
border-top: 1px solid #fff; 
background-color: #A6DADC; 
word-wrap: break-word; 


) 

保 行 修改 后 的 页 面 并 在 很 狭 容 的 神 览 器 窗口 中 打开 。 是 不 是 看 上 去 好 多 了 ? WORSE AER 
在 普通 的 断 开 点 进行 折 行 , 但 如 来 有 必要 , 它 将 在 下 划 线 甚至 在 某 个 单词 之 内 进行 折 行 (图 2-3). 
不 过 很 显然 , 在 单词 内 强制 折 行 并 不 古 个 好 主意 , 但 这 种 情况 总 比 文本 溢出 好 ， BAUR URL 
才 折 行 ， 普 通 文本 并 没有 从 单词 加 断 开 。 
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I really enjoy reading your blog, 
but what happens when I put a 
long URL in my comment text, 
Asha Gillenwater like this one: 

March 10, 2010 . http;//forabeautifulweb.com 
/blog/about 
/what_does_browser_testing_mea 
n_today/ 








图 2-3 ”浏览 器 可 能 在 任意 字符 之 间 进 行 折 行 
至 此 已 解决 了 这 个 小 麻烦 ， 接 下 来 把 这 些 评论 装扮 成 气泡 对 话 框 。 
2.3 ”无 图 的 图 形 效果 


你 可 以 创建 出 非常 具有 图 片 感 的 气泡 对 话 框 ， 却 无 需 使 用 任何 真正 的 图 片 。 不 使 用 图 片 除 了 
会 让 你 的 设计 师 朋 友 感 到 震 尺 之 外 还 有 很 多 其 他 好 处 : 可 以 区 省 所 有 用 来 创建 、 盘 裁 和 优化 图 睫 
所 花费 的 时 间 和 精力 , 还 包括 当 客 户 不 可 避免 地 想 要 对 需求 做 一 些小 改动 时 的 返工 时 间 。 网 站 的 
访客 则 受益 于 数据 下 载 量 和 HTTP 请 求 减少 带 来 的 速度 提高 。 





说 明 第 1 草 里 介绍 了 更 多 有 关 减 少 图 片 数量 所 带 来 的 好 处 ， 还 包含 一 个 真实 的 案例 。 


2.3.1 圆 角 的 实现 
那些 楼 角 分 明 的 直角 评论 框 看 起 来 并 不 那么 像 “气泡 ”， 对 吧 ? 那 就 把 它 打造 得 更 像 气 泡 


— 

圆 角 是 一 种 简单 、 背 见 的 视觉 效 末 ,， 但 在 过 去 的 网 页 中 却 古 出 人 意料 地 难以 实现 。 在 绘图 软 
件 中 制作 圆 角 图 片 很 费时 ,而 用 HTML 和 CSS 去 实现 一 个 圆 角 也 是 一 样 。 由 于 CSS2.1 限制 你 只 
能 对 每 个 盒 容 带 设置 一 个 背景 图 ， 而 且 用 来 控制 图 像 定 位 的 CSS May Sea, ALE ATE 
为 每 一 个 圆 角 图 片 分 别 舱 套 一 层 额外 的 aiv。 这 些 图 片 以 及 腾 肿 的 页 面 结构 和 CSS 增加 了 每 个 
访客 的 下 载 负 担 , 也 影响 着 页 面 读 取 的 速度 ,即便 是 使 用 脚本 动态 创建 圆 角 的 方式 茶 代 手工 实现 ， 
你 还 古 会 增加 用 户 的 文件 下 载 量 并 影响 页 面 的 执行 效率 。 而 所 有 的 这 些 麻烦 事 儿 , 都 源 自 于 那些 
看 似 人 简单 的 圆 角 效果 | 


使 用 border-radius RIL GK) wR 
如 果 你 想 要 实现 的 气泡 对 话 框 是 纯粹 的 椭圆 形 而 非 圆 角 算 形 ， 那 么 必须 使 用 椭圆 形 的 边 
角 ， 而 非 圆 形 的 。 椭 圆 形 圆 角 框 是 指 每 个 边 角 的 曲线 都 被 抹 平 ， 就 像 橄 槛 一样。 为 了 实现 椭 
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形 圆 角 ， 你 需要 为 其 指定 一 对 由 正 斜 杠 分 隔 的 尺寸 值 ， 例 如 border-radius: 50px/20px 
(Safari3 和 Safari4 使 用 非 标 准 的 语法 : 不 用 斜 杠 ， 而 用 空格 ) ， 这 意味 着 每 个 角 曲 线 的 横 轴 长 
50 像素， 而 纵 轴 只 有 20 像素 ， 从 而 形成 一 个 扁平 的 椭圆 形 。 你 可 以 为 每 个 边 角 指 定 不 同 的 角 
度 ， 请 和 参阅: http://css-tricks.com/snippets/css/rounded-corners , 

要 绘制 一 个 正 圆 , 首先 请 给 你 的 盒 容器 指定 相同 的 width fe height (A, 注意 使 用 em 代替 px 
作为 尺寸 单位 来 确保 它 可 以 根据 文字 量 等 比 扩大 。 然 后 ， 将 每 个 边 角 的 border-radius 的 尺寸 值 
设置 为 width/height 的 一 半 。 举 例 说 ,假设 你 的 盒 容 器 宽 和 部 都 是 10em, 则 指定 border-radius: 
5em。 更 多 示例 请 参阅 : http://blog.creativityden.com/the-hidden-power-of-border-radius-? , 


在 CSS3 中 实现 圆 角 ， 和 人 简单 到 只 需要 给 一 个 div 指定 bordqer-raqius :10px。 无 需 额外 的 
标签 结构 ， 无 需 图 片 ， 也 不 需要 使 用 JavsScript。 

当然 ，CSS3 还 在 持续 地 开发 并 争取 训 览 器 的 支持 ， 因 此 在 实际 使 用 时 还 稍 显 黎 琐 ， 但 真 的 
CAJE fn] 8. T, 

请 在 你 的 页 面 中 修改 blockquote 的 相应 规则 : 


blockquote { 
margin: 0 0 0 112px; 
padding: 10px 15px 5px 15px; 
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 
border-top: lpx solid #fff; 
background-color: #A6DADC; 
word-wrap: break-word; 


} 


border-radius: 20px; 这 人 句 声 明 是 实现 圆 角 的 W3C 标准 语法 ， 它 指定 所 有 四 个 圆 角 的 半 
径 是 20 像素 。 访 语法 目前 可 被 Opera, Chrome, Safari 5 fH IE 9 X: Ek, Firefox 和 Safari 4 及 之 前 
的 版 本 则 分 别 使 用 -moz-border-radius 和 -webkit-border-radius 属性 。 正 如 我 在 第 1 
HR, AGE ZG EELA, ru Hx ss AX RERE, EU SES f FH DU A gs 5 | 
区 特定 的 前 弘 。 而 无 前 级 的 属性 (在 本 例 中 即 border-radius) VARA Pa, RAD bt 
絮 人 确实 支持 该 属性 时 就 会 覆盖 之 前 的 规则 , 被 覆盖 规则 很 可 能 依据 旧 的 规范 而 使 用 了 非 标准 的 行 


说 明 4&Jf border-radius 属性 时 并 不 是 必须 指定 边框 (border) 样式 。 如 果 没 有 边框 ， 则 
浏览 器 只 为 背景 区 域 绘制 圆 角 。 
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border-radius 属性 的 来 龙 去 脉 

border-radius 属性 是 “背景 和 边框 模块 ”(Backgrounds and Borders Module) 的 一 部 分 ， 
你 可 以 在 www.w3.org/TR/css3-background 找到 它 。 它 是 用 来 分 别 指定 圆 角 半径 的 四 个 属性 的 
月 5A, IOS BRK border-top-left-radius, border-top-right-radius, 
border-bottom-right-radius fe border-bottom-left-radius,*} JM 44-32 f$ , Mozilla 
分 别 有 其 私有 的 非 标 准 属性 -moz-border-radius-topleft #9, 

你 可 以 在 一 个 border-radius 属性 里 为 四 个 角 分 别 指 定 四 个 由 空格 分 隔 而 成 的 值 , RIL 
用 一 个 值 为 四 个 圆 角 指定 相同 的 半径 。 在 Safari 4 和 iOS 3 及 之 前 版 本 的 Safari F, 
border-radius 属性 只 能 接受 同一 个 值 ， 而 无 法 在 这 个 简写 形式 里 对 四 个 角 进 行 分 别 定 义 。 

阅读 之 前 题 为 “使 用 border-radius 来 实现 (45) 圆 形 ”的 补充 内 容 来 了 解 有 关 栅 圆 形 圆 角 
的 语法 。 你 还 可 以 仿 问 www.owlfolio.org/htmletc/border-radius 和 http://muddledramblings.com/ 
table-of-css3-border-radius-compliance 来 获取 更 多 有 关 border-radius 属性 的 语法 细节 和 示例 。 

除了 气泡 对 话 框 之 外 ， 你 还 可 以 将 border-radius 用 于 如 下 场景 。 

口 按钮 (Button) ,请 参阅 http://blogfreakz.com/button/css3-button-tutorials 和 http://css-tricks. 
com/examples/ButtonMaker , 
标签 栏 (Tab), 
对 话 框 (Dialog box) 。 
形 标 记 (Circular badge), 
柱状 图 (Bar chart) ， 请 参阅 www.marcofolio.net/css/animated wicked css3 3d bar chart. 
html, 
O 表情 图 (Smiley face) ,请 参阅 http://ryanroberts.co.uk/_dev/experiments/css-border-faces , 


D DU DO 


表 2-2 border-radius 属性 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


Xd. OF 支持 ， 需 要 -moz- 前 级 支持 支持 ，5+; 秆 需要 支持 
-webkit- 前 级 





添加 上 述 三 行 代码 之 后 , 除 丰 8 及 之 前 的 版 本 以 外 的 所 有 浏览 如 就 全 部 支持 圆 角 了 (图 2-4). 
这 些 版 本 的 下 则 会 简单 地 名 略 该 属性 并 依旧 显示 直角 , 解决 了 问题 却 与 用 户 体验 无 碍 , 这 是 第 1 
革 所 述 的 “渐进 增强 ”的 一 个 绝 佳 案 例 。 既 然 它 是 一 个 纯粹 的 装饰 性 效果 ， 我 认为 IE 用 户 看 不 
到 它 并 无 大 碍 。 但 如 琳 你 觉得 这 个 方案 “人 确 有 大 人 碍 "， 那 么 请 继续 向 后 阅读 。 


说 明 是 否 看 到 我 多 次 提 到 了 第 1 章 的 内 容 ? 如果 你 略 过 了 第 1 章 , 请 立即 阅读 , 里 面包 含 一 些 
重要 内 容 。 


® Moziila 的 私有 属性 也 有 其 简写 形式 : -moz-border-radius。 





comments are so plain. Why don't you apply some CSS3 and jazz them up? 





EP Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 


Zoe Gillenwater 
February 28, 2010 


"^ 
I agree with Zoe. Make it cooler looking. 





Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 10096. 
Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 





Faith Mickley 
March 1, 2010 





I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
http;//forabeautifulweb.com/blog/about/what does browser testing mean today/ 


Asha Gillenwater 
March 10, 2010 


2-4 border-radius 属性 被 应 用 之 后 


针对 IE 的 兼容 方案 

如 条 必 须 在 下 8 及 之 前 的 版 本 上 实现 圆 角 ， 你 可 以 从 如 下 脚本 中 选择 一 个 。 

口 “PIE”， 作 者 是 Jason Johnston (http://css3pie.com) ， 该 脚本 将 从 CSS 里 读 取 已 被 定义 的 
border-radius 属性 值 ， 并 使 它们 可 以 在 IE 6 及 其 之 后 的 版 本 上 工作 。 它 还 能 让 其 他 
右 干 CSS3 ARE E ERF. 

O “Curved-Corner ， 作 者 是 Remiz Rahnas (http://code.google.com/p/curved-corner) ， 同 样 
会 从 你 的 CSS 代码 里 读 取 border-radius 的 值 ,但 它 仪 支持 4 个 角 的 border-radius 
属性 值 相同 的 情况 。 

口 “IE-CSS3”， 作 者 是 Nick Fetchak (http://fetchak.com/ie-css3), ， 基 于 “Curved-Corner” 开 
发 而 成 ， 对 了 下 增加 了 阴影 (drop shadow) RRR. 

O “DD roundies”， 作 者 是 Drew Diller (http://dillerdesign.com/experi- ment/DD_roundies) , 
这 个 脚本 可 以 让 你 对 四 个 角 进 行 单独 配置 ， 但 它 并 不 从 CSS 里 读 取 圆 角 的 定义 ， 你 必须 
针对 IE 和 手动 进行 设置 。 

早 在 border-radius 属性 尚未 得 到 支持 之 时 ， 除 了 上 述 这 些 针 对 IE 的 兼容 脚本 之 外 ， 还 

有 不 少 用 来 实现 圆 角 的 通用 型 脚本 和 基于 图 片 的 实现 技巧 ， 你 可 以 从 www.smileycat.com/ 
miaow/archives/000044.php 和 http://css-discuss.incutio.com/wiki/Rounded Corners 所 介绍 的 数 十 种 
方法 中 进行 入 选 。 

如 东 你 针对 正 选 择 使 用 脚本 或 图 请 的 兼容 方案 ， 请 确保 已 经 限制 了 脚本 来 产 ， 或 使 用 了 IE 

的 条 件 注 释 ， 或 直接 使 用 了 Modernizr 来 避 开 其 他 训 贤 妖 ， 上 述 方法 在 第 1 草 中 均 有 介绍 。 根 据 
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此 方法 ， 只 有 TE 用 户 会 因为 使 用 旧式 的 圆 角 实现 方案 而 影响 到 性 能 ， 其 他 的 非 卫 用 户 则 将 享受 
更 为 高 效 的 纯 CSS 版 圆 角 。 你 需要 权衡 的 是 为 TE 用户 实现 圆 角 所 花费 的 额外 工作 量 和 造成 的 性 


Bea Mi ee ELT o 
2.3.2 ”增加 气泡 的 尾巴 


有 了 圆 角 , 现在 每 个 评论 框 看 起 来 就 更 像 个 气泡 了 , 但 缺少 前 头 的 气泡 对 话 框 终 究 是 不 完整 
的 ， 通 第 把 这 个 指 问 发 言 者 的 第 头 称 为 “尾巴 5。 我 们 可 以 不 依赖 任何 图 片 就 制作 出 这 条 尾巴 ， 
事实 上 ， 其 至 不 需 用 到 CSS3， 只 需 使 用 CSS2 的 属性 和 选择 奏 即 可 实现 。 

1. 利用 边框 做 出 三 角形 

制作 尾巴 的 必须 素材 就 古 一 个 三 角形 ， 而 实现 它 你 只 需要 用 到 纯 CSS 的 普通 边框 。 当 一 个 
盒 容 副 的 两 条 边框 在 边 角 处 相交 时 ,六 览 器 就 会 在 交点 处 按 茶 个 角度 绘制 接合 线 (图 2-5). AU 
你 将 这 个 盒 容器 的 width FI height 的 设置 为 0， 并 为 每 条 边框 设 转 一 个 较 粗 的 width {BANK 
此 不 同 的 颜色 ， 最 终 会 得 到 四 个 被 拼接 到 一 起 的 三 角形 ， 它 们 分 别 指向 不 同 的 方向 (图 2-6)。 




















图 2-5 将 上 边框 设 为 不 同 的 颜色 之 后 ， 你 可 以 看 到 边框 按 某 个 角度 两 两 接合 在 一 起 





2-6 ” 当 一 个 盒 容 帮 的 宽 和 高 为 0， 则 每 条 边框 都 变 成 一 个 三 角形 


以 下 是 实现 图 2-6 所 呈现 的 效 末 需要 用 到 的 HTML 和 CSS 代码 厂 段 : 
<div class="triangles"></div> 
.triangles { 

border-color: red green blue orange; 

border-style: solid; 

border-width: 20px; 

width: 0; 

height: 0; 


提示 请 记得 ， 在 CSS 里 当 一 个 属性 同时 包 念 四 个 值 时 ( 见 代 码 中 的 porder-color 属性 ) ， 
它们 分 别 对 应 ut "E s “F” fe T E ?7 X JR 时 针 方 向 排列 


那么 将 上 、 左 和 下 边框 的 颜色 改 为 透明 会 发 生 什么 ?是 的 , 仪 有 右边 框 可 匈 ， 从 而 呈现 出 一 
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Asta lel Ze wun = (K 2-7)。 代 码 如 下 : 

<div class="triangle-left"></div> 

.triangle-left { 
border-color: transparent green transparent transparent; 
border-style: solid; 
border-width: 20px; 
width: 0; 
height: 0; 


< 


图 2-7 设置 其 中 三 个 边框 为 透明 就 能 呈现 出 一 个 三 角形 


因此 ， 综 上 所 述 ， 实 现 一 个 纯 CSS 三 角形 的 要 素 是 : 将 一 个 元 素 的 width 和 neight 设置 
为 0， 然 后 为 它 设置 较 粗 的 边框 ， 并 将 其 中 三 个 边框 的 颜色 设 为 透明 。 你 还 可 以 为 相 邻 边框 设置 
不 同 的 边框 宽度 来 改变 三 角形 的 角度 。 

2. 生成 尾巴 

现在 我 们 已 经 学 会 如 何不 依赖 图 片 去 绘制 一 个 三 角形 , 接 下 来 就 让 我 们 在 每 则 评论 的 左边 增 
加 一 个 指向 左 侧 的 三 角形 , 并 使 它 指向 评论 者 的 头像 。 为 了 实现 这 个 需求 ， 可 以 在 评论 框 中 藤 套 
一 个 span 或 div 标签 ,然后 将 它 转换 成 所 需 的 三 角形 , 但 请 勿 向 这 个 元 素 里 填充 内 容 ， 我们 将 
使 用 CSS 的 内 容 生 成 特性 让 其 呈现 出 理想 的 样子 。 

内 容 生 成 (Generated Content) 是 CSS2.1 的 一 项 特性 ， 利 用 它 你 可 以 将 内 容 书写 在 CSS 里 
并 让 它 展现 在 HTML 里 。 当 你 不 希望 手动 往 HTML 写 入 某 些 硬 代 码 时 它 就 变 得 非常 有 用 ， 比 如 
用 来 实现 标题 前 方 的 章节 编号 或 是 链接 之 后 的 小 图 标 等 。 但 它 不 应 被 用 来 写 和 重要 内 容 ， 因 为 一 
旦 用 户 无 法 访问 CSS 文件 就 会 因此 错过 该 内 容 。 

要 使 用 CSS 来 生成 一 段 内 容 ， 你 需要 用 : :pefore 或 ::after 伪 元 素 ( 亦 被 写作 :before 
和 :after) 来 指定 内 容 将 被 插入 的 位 置 ， 并 用 content 属性 设置 内 容 本 身 。 














为 何 使 用 双 冒 号 
你 可 能 注意 到 我 书写 ::before Fe::after 伪 元 素 时 使 用 了 两 个 冒号 而 并 非 你 所 常见 的 
一 个 。 这 不 是 拼写 错误 。CSS3 已 经 将 伪 元 素 (pseudo-element) 的 前 级 更 改 为 双 冒 号 ,而 伪 类 
(pseudo-class) 则 保持 为 单 冒 号 。 
只 要 你 愿意 ， 可 以 继续 使 用 单 冒号 的 版 本 ， 它 可 以 兼容 。 事 实 上 ， 了 下 8 及 之 前 的 版 本 并 不 
支持 双 冒 号 的 语法 ,因此 在 本 书 中 我 们 将 继续 沿用 单 冒 号 版 。 你 可 以 在 同一 个 选择 器 组 里 同时 
At FLFR NAA, rode. caption:before fe .caption::before { content: "(BÉE)";), 


举例 来 说 ， 为 了 给 页 面 上 每 个 图 片 的 标题 都 增加 “(图 )” 的 前 级 ， 你 可 以 使 用 如 下 的 CSS; 
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.caption:before { 
content: "(A)" 
} 


ER CSS 代码 会 使 <p class="caption"> 我 的 猫咪 可 爱 吗 ? </P> 这 段 HTML fee Ke: 

(图 ) 我 的 独 咪 可 爱 吗 ? 

回 过 头 再 来 看 我 们 想 要 实现 的 气泡 对 话 框 尾巴 ， 这 里 关注 的 是 CSS 所 生成 内 容 四 周 的 边框 ， 
而 不 是 内 容 本 身 。 因 此 ， 让 我 们 来 生成 一 份 隐形 的 内 容 : 一 个 空格 (non-breaking space) “。 

空格 的 HTML 实体 写作 &nbsp;, 但 在 content 属性 值 中 却 无 法 使 用 HTML 实体 ， 需 要 改 用 
该 字符 Unicode 代码 点 (Code Point) (或 引用 ) 的 十 六 进 制 部 分 。 这 事 儿 听 起 来 很 难以 理解 而 且 
太 过 “学 术 ”， 不 过 请 勿 担心 ， 有 很 多 便捷 的 线 上 图 表 可 以 提供 这 类 信息 的 查询 服务 。 

这 里 就 有 一 例 : 访问 www.digitalmediaminute.com/reference/entity 你 将 看 到 252 个 小 格子 , 每 
个 格子 里 都 是 一 个 (X)HTML 实体 。 请 在 “Filter entities by keyword” (根据 关键 词 过 滤 实 体 ) X 
本 框 中 输入 “non-breaking space ， 然 后 251 个 格子 将 会 消失 ， 只 留 下 名 为 &nbsp; 的 那个 实体 格 
子 。 请 将 光标 悬 停 到 该 格子 上 方 〈 图 2-8) ， 另 外 两 种 编码 将 会 显示 出 来 : 分 别 是 该 字符 的 数字 编 
t4 (numerical code) (在 本 例 中 即 &#160; ) fH Unicode 编码 (u00A0) 。 而 你 需要 的 Unicode 编码 
的 十 六 进 制 部 分 ， 束 是 字母 “u ”后 的 字符 。 因 此 ， 请 将 “00A0 ”复制 到 剪贴 板 。 





提示 “ 另 一 个 实用 的 工具 名 叫 Unicode Code Converter (Unicode 编码 转换 器 ) ， 地 址 是 http:// 
rishida.net/tools/conversion/。 输 入 一 个 字符 或 其 HTML 实体 名 ,， 这 个 工具 就 可 以 将 它 转换 
成 多 种 不 同 的 格式 ， 其 中 就 包括 十 六 进 制 的 代码 点 。 


XHTML Character Entity Reference 


This page contains the 252 allowed entities in HTML 4 and XHTML 1.0, as outlined in section 24 of the official HTML 4 specifications, published by 
the W3C. If you're new to this site, you can find help on how to use this reference. 


The entities have been divided and color coded into the following logical categories for the purpose of orgainization. Click on a 
box to filter the entites by their category. 












Markup b Shapes and x Mathematical 司 Latin x Symbols & v International x Show All 
Significant Arrows Operators Characters Greek Letters ||Characters 
Filter entities by keyword: Change Font: Options » 
non-breaking space| Arial T Show Entity Descriptions 
Ads by Google XHTML Entities Special Character Character Reference XHTML CSS Templates 
N 
&nbsp; 














&#160; 


u00A0 break space = non-breaking space 





2-8 使 用 XHTML Character Entity Reference (字符 实体 参考 ) 来 查找 不 同 
实体 的 Unicoge 代码 点 





(D ‘Eze nsbp 的 全 称 ， 可 直译 为 “不 折 行 间隔 "， 顾 名 思 义 ， 它 的 插入 不 会 导致 内 容 被 浏览 如 换 行 。 
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我 们 越 来 越 接近 终点 了 ， 但 即使 现在 有 了 所 需 的 Unicode 编码 ， 仍 旧 不 能 像 这 样 将 它 直 接 赋 
值 给 content ETE: 


blockquote:after { 
content: "Q00A0"; 
} 


如 琳 这 样 写 ， 议 览 絮 将 非 第 直截了当 地 显示 “00A0”， 而 不 是 我 们 想 要 的 空格 。 为 了 告诉 六 
贤 如 我 们 输入 的 其 实 是 特殊 的 字符 编码 ， 需 要 对 编码 进行 转 义 (escape)。 如 琳 你 是 一 名 程序 员 ， 
那么 应 该 很 熟悉 这 个 术语 , 但 对 于 其 他 读者 来 说 , 你 可 以 将 它 理 解 成 必须 在 编码 之 前 加 上 一 个 反 
RHL ( 即 “\)。 它 会 提示 浏览 强 不 要 把 反 斜 杠 之 后 的 字符 当做 纯 文本 ， 而 古 将 它 作 为 一 种 编码 
接纳 并 解析 成 其 他 的 形式 。 

有 了 反 斜 杠 可 谓 万 事 俱 备 ， 我 们 终于 得 以 成 功 插 入 一 个 简单 的 空格 了 : 


blockquote:after { 
content: "\Q0OA0"; 
} 


说 明 Unicode 代码 点 在 书写 时 通常 带 有 “U+” 前 组， 而 不 仅仅 是 个 字母 “u ” 。 但 无 论 是 哪 种 
形式 ， 能 够 被 content 属性 所 用 的 只 能 是 紧 跟 在 前 缓 之 后 的 由 四 位 数 "组 成 的 十 六 进 制 
编码 。 


一 旦 更 新 了 代码 ， 就 会 发 现 页 面 看 起 来 跟 修 改 前 一 模 一 样 ， 这 当然 古 因 为 空格 是 不 可 见 的 。 
授 下 来 增加 边框 来 让 它 显示 出 来 , 还 需要 将 它 的 width 和 height 设置 为 0, 并 使 它 呈 现 为 块 元 
素 (block element) 以 便 将 其 作为 尾巴 置 于 气泡 对 话 框 的 一 侧 。 


blockquote:after { 
content: "\00a0"; 
display: block; 
width: 0; 
height: 0; 
border-width: 10px 20px 10px 0; 
border-style: solid; 
border-color: transparent #000 transparent transparent; 





说 明 在 本 例 中 ， 使 用 伪 元 素 :before 和 :after 效果 都 一 样 ， 因 为 我 们 马上 就 会 让 它 离 开 其 
默认 的 布局 位 置 。 


如 打 将 全 部 四 条 边框 设置 为 同样 的 宽度 , 我 们 将 会 得 到 一 个 相当 局 平 的 三 角形 , 就 像 你 在 图 
2-7 中 看 到 的 那样 。 为 了 使 它 看 起 来 更 修长 一 些 ， 我 们 把 上 、 下 这 框 设 置 为 10 像素 宽 ， 并 将 左边 


O 在 十 六 进 制 的 计数 方法 中 ，ABCDEF 六 个 字母 也 算 作 “数字 ”。 
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框 宽 度 设置 为 0 来 让 它 消 失 ; 而 右边 框 一 一 也 是 将 被 我 们 制作 成 指 同 左 侧 的 三 角形 一 一 宽度 设置 
为 20 像素 。 除 了 右边 框 外 ， 甚 他 所 有 边框 均 为 透明 ， 在 这 里 我 先 将 右边 框 的 颜色 临时 设置 为 湛 
色 以 便 我 们 能 够 正确 地 将 其 定位 〈 见 图 2-9), 


Thanks for posting th 
‘comments are so pla 





Foe Gillenwater 
February 28, 2010 


图 2-9 AAW ee Ata lal Zc DURS — FE 


这 个 三 角形 目前 紧 跟 在 blockquote 内 容 的 后 面 ， 并 不 是 一 个 气泡 对 话 框 尾巴 理应 存在 的 
地 方 。 你 可 以 使 用 绝对 定位 法 (absolute positioning) 来 修正 其 位 置 。 首 先 ， 为 blockquote 增 
加 一 句 position: relative; 样 式 规则 ， 这 将 为 绝对 定位 的 子 元 素 建 并 参照 点 : 


blockquote { 
position: relative; 
margins 0.0 0 112px; 
padding: 10px 15px 5px 15px; 
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 
border-top: 1px solid #fff; 
background-color: #A6DADC; 
word-wrap: break-word; 


) 
接 下 来 ， 调 整 rop 和 Left 的 值 对 生成 的 内 容 进行 绝对 定位 : 


blockquote:after { 
content: "\00a0"; 
display: block; 
position: absolute; 
top: 20px; 
left: -20px; 
width: 0; 
height: 0; 
border-width: 10px 20px 10px 0; 
border-style: solid; 
border-color: transparent #000 transparent transparent; 


} 

你 可 以 将 top 设置 成 任何 大 于 等 于 border-radius 的 值 ， 以 确保 它 位 于 圆 角 的 弧 线 下 方 ， 
侧 对 着 评论 框 的 直 边 。 为 了 将 三 角形 拉 到 最 左边 ，1eft 值 必须 为 负 值 ， 且 该 值 的 绝对 值 刚好 等 
于 三 角形 的 宽度 。 在 本 例 中 , 三 角形 的 宽度 ( 即 右 边框 的 宽度 ) 是 20 像素 , 因此 我 们 必须 将 lett 
值 设置 为 -20px， 它 将 使 三 角形 恰好 街 接着 评论 框 的 左 缘 ( 见 图 2-10), 
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Thanks for posting th 
comments are so pla 
Zoe Cam 
February 28, 2010 
Iagree with Zoe. Mak 





Cary Gillenwater 
March 1, 2010 


图 2-10 绝对 定位 法 将 三 角形 置 于 我 们 想 要 的 地 方 


有 些 评论 的 内 容 可 能 太 短 ， 以 至 于 三 角形 过 于 靠近 底 边 ， 正 如 图 2-10 中 的 第 二 则 评论 所 显 
示 的 那样 。 要 修复 这 个 问题 ， 请 为 blockaquote 增加 一 条 min-height :42px; 的 规则 : 


blockquote { 
position: relative; 
min-height: 42px; 
margin: 0 0 0 112px; 
padding: 10px 15px 5px 15px; 
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 
border-top: 1px solid #fff; 
background-color: #A6DADC; 
word-wrap: break-word; 


} 
现在 三 角形 不 再 履 盖 于 blockduote 之 上 了 ， 我 们 可 以 将 它们 的 颜色 统一 起 来 : 


blockquote:after { 
content: "\O0a0"; 
display: block; 
position: absolute; 
top: 20px; 
left: -20px; 
width: 0; 
height: 0; 
border-width: 10px 20px 10px 0; 
border-style: solid; 
border-color: transparent #A6DADC transparent 
transparent; 


} 
本 次 修改 使 每 个 评论 框 的 气泡 和 尾巴 都 无 颖 地 结合 到 了 一 起 (图 2-11)。 
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Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 





Be 
Zoe Gillenwater 


February 28, 2010 


I agree with Zoe. Make it cooler looking. 





Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 100%. 
Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 





Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
http://forabeautifulweb.com/blog/about/what_does_browser_testing_mean_today/ 





Asha Gillenwater 
March 10, 2010 


图 2-11 每 条 尾巴 都 被 着 色 并 正确 地 定位 


说 明 至 此 为 止 的 所 有 修改 都 在 speech-bubble 1.html 页 面 里 ， 它 在 你 所 下 载 的 本 章 的 示 
例文 件 之 中 。 


3. 针对 IE 的 兼容 方案 

我 们 制作 的 尾巴 在 IE 8 及 其 之 后 的 版 本 显示 正常 ,但 IE 7 及 之 前 的 版 本 并 不 支持 内 容 生 
成 的 特性 ， 因 此 这 些 训 览 右 的 用 户 将 看 不 到 这 条 尾巴 。 我 想 这 种 情况 是 可 以 接受 的 ， 这 些 用 
户 总 不 会 盯 着 评论 框 然 后 自己 琢磨 着 说 :“ 等 等 ! 为 什么 这 些 评论 框 的 旁边 就 没 个 小 第 头 什 么 
的 呢 ? ” 

要 给 IE 7 及 之 前 的 版 本 也 加 上 尾巴 ， 需要 手动 在 HTML 里 为 每 个 评论 框 额 外 增加 一 个 元 素 
(比如 说 一 个 空白 的 span 标签 )， 并 想 办 法 把 它 实 现成 一 个 三 角形 。 








2.3.3 利用 RGBA 或 HSLA 实 现 半 透 明 背 景 


对 于 气泡 对 话 框 的 外 观 ， 我 们 已 经 实现 了 圆 角 和 小 尾巴 ， 能 做 的 事 已 经 不 多 了 ， 但 如 果 能 附 
加 一 些 图 片 细节 ， 为 它 增添 更 多 的 视觉 层次 感 和 饱满 度 ， 或 许 效果 会 更 好 ， 

一 个 增添 层次 感 的 好 方法 是 使 背景 变 成 半 透 明 (Semitransparent 或 Alpha transparency) 。 通 过 
显露 一 点 页 面 背景 的 方式 ， 你 就 能 使 界面 显得 更 有 层次 ， 仿 佛 半 透明 的 元 素 是 悬浮 于 背景 之 上 。 
我 认为 这 种 效果 与 气泡 对 话 框 非常 相 竺 ， 因 为 “气泡 ”总 是 轻 奢 味 的 。 
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在 CSS3 出 现 之 前 ， 你 可 以 使 用 一 张 半 透明 的 PNG 背景 图 来 实现 这 个 需求 。 使 用 背景 图 的 
缺点 是 会 增加 一 次 服务 器 请 求 ， 这 会 使 用 户 加 载 得 更 慢 一 点 。 如 果 你 还 需要 兼容 下 6， 那 么 负载 
的 压力 可 能 会 更 大 一 些 : 因为 它 需 要 一 个 脚本 来 “认识 ” 半 透 明 的 PNG 图 片 。 男 外 ， 由 于 不 能 
对 边框 应 用 背景 图 ,因此 你 将 无 法 使 气 袍 对 话 框 的 尾巴 也 变 成 半 透 明 。 如 东 气 泡 是 半 透 明 的 ， 而 
它 的 尾巴 却 不 透明 ， 会 显得 非常 奇怪 。 

1. CSS3 的 RGBA 和 HSLA 色彩 模式 

在 CSS3 里 我 们 可 以 使 用 RGBA 和 HSLA 两 种 色彩 模式 , 二 者 均 可 以 用 来 在 设置 颜色 的 同时 
也 指定 其 透明 度 。RGBA HIE E, RE., AEF Alpha 透明度”(Red-Green- Blue-Alpha) , 
而 HSLA 则 代表 “色调 、 饱 和 度 、 亮 度 "和 Alpha 透明 度 ”(Hue-Saturation-Lightness- Alpha), 

我 们 可 以 用 如 下 任意 一 种 格式 来 描述 被 用 作对 话 框 底 色 的 暗 监 色 。 

口 HEX^; #A6DADC 

Q RGB; 166,218,220 

UD RGBA; 166,218,220,1 

L] HSL; 182,44%,76% 

Q HSLA; 182,44%,76%,1 

它们 返回 给 我 们 完全 一 样 的 颜色 ， 只 不 过 得 到 的 途径 不 同 。 这 就 好 比 梧 和 理 豆 鸭 “ 柯 ” 字 写 法 
má, IBS IRI E. 

在 RGBA 模式 里 ， 前 三 个 参数 分 别 是 红色 、 绿 色 和 蓝 色 的 强度 值 ， 取 值 从 0~255 或 0% — 
100% (最 常用 的 应 该 是 0 一 225， 而 非 百 分 数 形式 )。 而 在 HSLA 模式 里 , 前 三 个 参数 则 分 别 代表 
色调 (0—360). tR (0%~ 100%) 和 亮度 (0%~ 100%), RGBA 和 HSLA 的 第 四 个 参数 都 
是 透明 度 ， 取 值 从 0 (完全 透明 ) 到 1 (完全 不 透明 )。 








说 明 CSS3 19% opacity 属性 ， 但 它 的 作用 是 使 整个 元 素 都 半 透 明 ， 包 括 前 最 内 容 ， 而 不 仅 


你 可 以 使 用 绝 大 多 数 的 绘图 软件 来 取得 所 选 颜色 的 正确 红 、 绿 、 蓝 值 。 先 用 取 色 问 来 选取 颜 
色 ， 然 后 在 取 色 需 窗 口 或 颜色 对 话 框 中 ， 软 件 会 告诉 你 该 颜色 的 HEX 值 和 RGB ff. (图 2-12), 
而 获得 HSL 值 则 需要 一 些 技巧 ， 因 为 并 非 所 有 绘图 软件 都 使 用 HSL 色彩 模式 ， 比 如 Photoshop 
就 使 用 HSB (也 称 HSV) 模式 ， 它 与 HSL 很 相似 ， 又 不 尽 相 同 。 如 果 你 是 Mac 的 Snow Leopard 
用 户 ， 可 以 试 试 一 款 由 Matt Patenaude (http://mattpatenaude.com) 开发 的 免费 软件 Colors， 你 可 
以 用 它 从 屏幕 的 任何 地 方 取 色 ， 并 以 HSLA 等 格式 显示 出 来 。 如 采 你 不 是 Mac 用 户 ， 我 建议 你 
选择 一 款 在 线 的 HSL 取 色 器 和 转换 工具 〈 详 见 下 页 的 “在 线 色 彩 工 具 ”) 。 





D 三 个 词 叫 法 众多 : Hue 还 可 叫 作 色相 、 色 彩 ，Saturation BEKE., RERE, Lightness 也 称 明度 。 
© 即 颜 色 值 的 十 六 进 制 形 式 。 
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2-12 Photoshop 的 取 色 器 对 话 框 显示 与 HEX 值 相对 应 的 RGB 值 





在 线 色彩 工具 
Google 一 下 你 就 会 发 现 很 多 基于 网 页 的 取 色 器 和 转换 工具 ， 这 里 我 给 大 家 介绍 两 款 在 处 
理 RGB fe HSL 值 方面 特别 短小 精 悍 的 工具 。 

口 来 自 http://serennu.com/colour/hsltorgb.php 的 色彩 转换 工具 可 以 帮助 你 在 HEX, RGB 
和 HSL 值 之 间 进 行 转换 ， 

O 而 来 自 www.workwithcolor.com/doughnut-color-picker-01.htm #7 “HiB” X& & 23] vr 
以 方便 你 取 色 并 转换 颜色 。 这 款 取 色 器 使 用 HSL 色彩 模式 ， 但 也 提供 HEX 和 RGB 的 
对 应 值 ， 你 也 可 以 手动 填写 以 上 任意 格式 的 颜色 值 进行 转换 。 


fi FASE FO bt as HU BR £4 as HEGRE HSL 或 RGB 值 将 更 为 向 单 和 快捷 。 我 是 Rainbow 这 球 
Firefox 扩展 (https://addons.mozilla.org/en-US/firefox/addon/14328) 的 忠实 用 户 。 安 装 它 之 后 可 以 
先 指定 你 想 要 的 颜色 格式 (图 2-13) ， 接 着 使 用 其 Inspector (检视 ) 工具 从 一 个 网 页 里 选取 颜色 
时 ， 它 会 弹出 选项 ， 便 于 将 颜色 复制 到 剪贴 板 (图 2-14) 后 粘贴 到 CSS 代码 里 。 不 过 需要 注意 
的 是 ,该 扩展 至 今 尚 不 支持 RGBA 和 HSLA 中 的 “A” 参 数 ( 即 透 明度 ) 的 显示 ， 因 此 必须 手动 
添加 ， 不 过 我 想 这 难 不 倒 你 。 











Show coordinates 














(V| Show swatch next to mouse pointer 


Analyzer 


Number of colors to show: 


6 





2-13 Æ Rainbow 的 选项 面板 里 ， 把 “Display color values in” 
选项 设置 为 “Hsl” 


don't really understand is why these blog 
2m up? 
hsl(182, 44%, 7640) 
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2-14 {EH Rainbow 的 Inspector 工具 ， 你 可 以 点 击 一 个 颜色 并 复制 它 的 值 


2. RGBA 5 HSLA 之 间 的 抉择 

我 推荐 使 用 Rainbow 这 款 Firefox 扩展 ， 主 要 是 因为 它 支 持 很 多 扩展 不 支持 的 HSL 模式 ， 而 
我 更 推 党 使 用 HSLA 而 非 RGBA, 

这 方面 我 应 该 算是 少数 派 。 更 多 人 情愿 使 用 RGBA 而 不 是 HSLA, 但 我 想 这 可 能 是 因为 大 多 
数 人 根本 设 听 说 过 HSLA。 这 很 邻 人 遗憾 ， 因 为 大 多 数 惯 用 HSLA 的 人 发 现 它 更 为 直观 。 

伴 到 一 个 RGB/RGBA 值 ， 你 很 难 一 眼 就 看 出 它 所 代表 的 颜色 。 如 果 你 花 上 一 分 钟 去 研究 一 
个 RGB/RGBA fü, 例如 rgb(166,218,220)， 你 可 以 通过 判断 三 个 参数 (240, S. HE) 中 哪个 
值 更 高 的 方法 来 了 解 它 所 代表 的 颜色 。 但 当 我 面 对 整 张 样式 表 的 代码 ,并 试图 从 中 找 出 某 个 神秘 
颜色 的 定义 之 处 的 时 候 , 我 想 我 没有 闲 心 去 花 时 间 做 上 述 的 研究 和 判断 。 而 且 在 我 终于 发 现 某 个 
RGB 值 是 代表 一 种 蓝 绿 色调 之 后 ， 也 很 难 单 从 红 、 绿 、 蓝 三 个 数值 就 能 看 出 这 个 颜色 究竟 有 多 
饱和 ， 或 者 亮度 几何 。 











HSL/HSLA 模式 的 色彩 速 查 表 


如 果 你 准备 使 用 HSLA， 那 么 记 住 少数 关键 的 色调 值 (或 大 概 了 解 它们 在 0 一 360 区 间 中 
的 位 置 ) 将 很 受用 。 
a 0 或 360= 红色 (red) 
30-4&&, (orange) 
60= 黄 色 (yellow) 
120= 绿 色 (green) 
180 = 青色 (cyan) 
240=% & (blue) 
270 = € & (purple) 
300 = 2r & (magenta) 
要 获取 HSL/HSLA 格式 的 黑色 (black) 值 ， 只 需要 简单 地 将 亮度 设置 为 0%; GENRE 
度 100%。 对 于 这 两 个 颜色 ， 色 调和 饱和 度 可 设置 为 任意 值 。 
而 要 获取 HSL/HSLA 格式 的 灰色 (gray) 值 ， 则 只 需 将 饱和 度 设 置 为 0%， 此 时 亮度 值 控 
制 着 灰色 的 明暗 程度 ， 色 调 的 取 值 则 无 关 紧 要 。 


OUUOODODL DL 








RGB/RGBA 的 另 一 个 问题 是 ， 如 果 你 想 要 对 颜色 进行 调整 ， 例 如 让 它 变 暗 、 变 浓 或 是 变 得 


2.3 ARN AH aR 5] 


更 绿 一 些 的 时 候 ， 就 不 得 不 猜测 着 去 改变 每 一 项 的 值 来 得 到 想 要 的 颜色 。Web 设计 之 中 ,对 页 面 
的 不 同 区 块 使 用 相同 色 系 是 很 常见 的 事 ， 比 如 在 导航 条 中 对 当前 选中 的 Tab 设置 稍 亮 的 颜色 。 但 
在 RGB 色彩 模式 下 ， 同 一 色 系 的 不 同 颜色 却 不 一 定 拥有 相似 的 颜色 值 。 拿 我 们 之 前 使 用 过 的 瞳 
蓝 色 (166,218, 220) 打 个 比方 ， 一 个 只 比 它 稍 浓 一 点 的 颜色 值 是 (155, 209,211)。 全 部 三 个 数字 
发 生 了 变化 ， 才 完成 了 一 次 非常 微小 的 饱和 度 调整 。 

而 使 用 HSL/HSLA 来 获取 一 个 颜色 ， 你 不 必 同 时 调整 红 、 绿 、 蓝 三 种 颜色 ， 只 需要 将 色调 
值 设 为 一 个 特定 值 。 你 需要 做 的 就 是 记 住 0 和 360 代表 着 同一 种 颜色 纯 红色 ， 然 后 按照 彩虹 
的 颜色 顺序 排列 ， 最 终 重新 回 到 纯 红色 ， 就 像 是 一 个 色 盘 (图 2-15)。 
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2-15 HSL 色彩 模式 里 的 360 个 色调 ( 另 见 彩 插图 2-15) 


RGBA 和 HSLA 的 来 龙 去 脉 

RGBA £e HSLA 是 颜色 (Color) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/TR/css3-color 找到 
它 。 可 以 通过 它们 来 同时 设置 颜色 和 透明 度 。 

在 RGBA 模式 里 , 前 三 个 参数 分 别 是 红色 、 绿 色 和 蓝 色 的 强度 值 , 取 值 为 0 一 255 或 0% 一 
100%。 而 在 HSLA 模式 里 ， 前 三 个 参数 则 分 别 代表 : BH (0—360). tate (0%~ 100%) 
和 亮度 (0% 一 100%)。RGBA 和 HSLA 的 第 四 个 参数 都 是 透明 度 ， 取 值 从 0 (完全 延明 ) 到 1 
(FEA) 

除了 实现 气泡 的 背景 之 外 ， 还 可 以 将 RGBA 和 HSLA 用 于 下 列 场景 。 

O 将 阴影 投射 于 背景 之 上 〈 稍 后 你 将 在 本 章 学 习 如 何 实 现 该 效果 )。 

O 按钮 或 任何 其 他 物件 的 高 光 渐 变 (ILE), 

O 为 导航 栏 中 当前 所 选 的 链接 着 上 比 同色 调 更 亮 或 更 瞳 的 颜色 。 

口 NE LYS EWA, APM http://css-tricks.com/text-blocks-over-image 和 www. 

htmldrive.net/items/show/38 1/snazzy-hover-effects-using-css3.html , 

O 悬浮 于 内 容 上 方 的 半 透 明 对 话 框 、 模 态 窗 和 提示 栏 (tooltip), 


表 2-3 RGBA 和 HSLA 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


支持 ，9+ 支持 x x x 


得 到 了 你 想 要 的 色调 值 之 后 ,如 果 想 让 它 浓 一 点 或 淡 一 点 儿 就 调整 饱和 度 , 想 要 它 更 上 暗 一 些 
或 亮 一 些 就 调整 亮度 。 获 取 同色 系 的 不 同 颜色 或 是 对 颜色 进行 微调 很 简单 。 开 始 使 用 HSLA 色彩 
模式 后 ,而 且 更 了 解 每 个 色调 值 意味 着 什么 的 时 候 ， 当 你 再 遇 到 样式 表 中 的 HSLA 颜色 值 时 ,将 
一 目 了 然 。 

总 之 ， RGBA 和 HSLA 的 浏览 器 支持 度 相同 ， 而 且 它 们 也 能 表示 相同 的 颜色 。 本 书 中 使 用 
HSLA 因为 我 觉得 它 更 直观 ， 但 如 果 你 认为 RGBA 更 为 简单 ， 那 么 用 它 也 很 好 。 

3. 制作 半 透 明 的 气泡 对 话 杠 

卉 清楚 所 有 这 些 模式 之 后 ， 现 在 我 们 可 以 开始 把 气泡 对 话 框 的 背景 色 由 十 六 进 制 值 改 成 
HSLA 格式 来 使 它 半 透 明 化 。 

气泡 对 话 框 目前 的 颜色 值 是 #+A6DADC。 我 们 可 以 使 用 Rainbow 扩展 来 找到 其 对 应 的 HSLA 
值 。 请 用 Firefox 打开 页 面 ， 并 使 用 Rainbow 的 Inspector 工具 选取 气泡 对 话 框 的 背景 色 。 它 将 显 
示 其 HSL 值 是 hsl(182, 44%, 76%)。 复 制 该 值 ， 返 回 代码 编辑 器 ， 并 用 它 替 换 掉 目 前 背景 色 的 十 
六 进 制 值 ， 


blockquote { 








position: relative; 
min-height: 40px; 
margin: 0 0 0 112px; 
padding? 10px 15px 5px 15px; 
-moz-border-radius: 20px; 
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-webkit-border-radius: 20px; 
border-radius: 20px; 

border-top: 1px solid #fff; 
background-color: hs1(182,44%, 76%) ; 
word-wrap: break-word; 


说 明 HSL 中 用 来 分 隔 各 个 参数 过 号 之 后 的 空格 可 有 可 无 ， 上 例 中 我 没有 加 空格 


SS 


如 和 朱 修 改 后 保存 并 刷新 页 面 ， 显 示 结 果 将 与 之 前 一 模 一 样 。 你 并 未 修改 颜色 ， 只 是 修改 了 颜 
色 的 格式 。 


现在 我 们 要 修改 这 种 新 的 格式 来 使 气泡 对 话 框 变 成 半 透 明 。 将 background-color: 
hs1 (182, pi 6%) ;修改 为 background-color: hsla(182,44$,762$,.5);, THB BIE 


“hsla” 中 的 “a” 
你 同样 需 NN 巴 的 颜色 来 匹配 整体 风格 。 复 制 HSLA 值 并 替换 其 border-color 的 样 


TU AHR 


blockquote:after { 
content: "\00a0"; 
display: block; 
position: absolute; 
top: 20px; 
left: —20px; 
width: 0; 
height: 0; 
border-width: 10px 20px 10px 0; 
border-style: solid; 
border-color: transparent hsla(182,44%,76%,.5) 
transparent transparent; 





说 明 我 将 透明 度 的 值 写 作 “.$ ， 但 “0.3” 也 一 样 。 


保存 代码 并 在 闵 览 融 中 刷新 页 面 ,你 可 以 透 过 气泡 对 话 框 隐约 看 到 页 面 的 背景 图 委 , 同样 地 ， 
每 条 尾巴 的 尖端 也 显现 出 了 评论 者 的 头像 (图 2-16)。 


Thanks for posting this article. Lots of good info. The only 
comments are so plain. Why don't you apply some CSS3 


| I agree with Zoe. Make it cooler looking. 


图 2-16. — 4^ WT HS TIER T RC CLTC IH Zr C, Ae PA T 
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4. 针对 IE 的 兼容 方案 

IE 8 及 之 前 的 版 本 不 支持 HSLAARGBA， 但 有 以 下 备 选 兼容 方案 。 

O AXED Gi artaze HEX, RGB 或 HSL 格式 的 不 透明 背景 。 如 采 在 HSLA/RGBA 样式 之 
前 声明 了 不 透明 的 背景 色 ， 而 且 两 者 都 使 用 〈 或 仅 有 HSLA/RGBA 使 用 ) background 
这 个 简写 属性 ， 那 么 IE 8 及 之 前 的 版 本 可 以 忽略 HSLA/RGBA 的 样式 定义 ， 从 而 正确 
使 用 不 透明 的 版 本 。 但 如 果 不 用 background， 而 用 background-color 属性 来 定义 
HSLA/RGBA 颜色 , IE 7/6 将 不 会 应 用 不 透明 的 颜色 , 它们 将 尝试 使 用 HSLA/RGBA 颜色 ， 
失败 后 将 不 会 显示 任何 颜色 。 在 某 些 页 面 ， 文 字 在 没有 背景 的 情况 下 依旧 可 读 ， 这 种 情 
况 疝 可 接受 。 但 在 另外 一 些 时 候 , 设 有 背景 的 文字 难以 辨认 ,又 或 是 无 法 应 用 background 
这 种 简写 属性 ， 这 就 需要 针对 IE 7 及 之 前 的 版 本 定义 一 条 专用 规则 来 为 其 指定 不 透明 的 
背景 色 。 关 于 IE 专 有 属性 的 信息 请 参看 第 1 章 。 

O 将 一 小 张 半 透明 PNG 图 片 平 铺 作为 背景 图 。 该 方案 比 起 上 一 种 方案 来 说 ， 优 势 在 于 可 以 
真正 实现 半 透 明 。 它 适用 于 了 正 87， 但 不 兼容 IE 6 及 之 前 的 版 本 ， 因 为 它们 不 支持 Alpha 
透明 的 PNG 图 片 。 解 决 这 个 问题 的 方法 很 多 ,你 可 以 使 用 I 的 AlphalmageLoader JS i , 
或 从 众多 利用 该 滤 镜 来 解决 透明 问题 的 脚本 中 选择 一 个 ， 或 给 IE 6 使 用 GIF/PNGS 的 透 
HARA, 或 者 干脆 为 其 指定 不 透明 的 背景 色 。 但 所 有 的 这 些 方法 都 意味 着 额外 的 工作 量 ， 
而 且 对 页 面 的 执行 效率 会 产生 较 大 影响 一 一 AlphaImageLoader 滤 镜 运行 起 来 非 第 慢 ， 而 
一 张 图 片 就 是 另 一 次 的 HTTP 请 求 (另外 ， 由 于 尾巴 的 部 分 使 用 边框 来 实现 ， 因 此 上 述 
方法 不 适用 于 本 例 ) 。 除 非 不 需要 考虑 兼容 下 6， 否 则 我 并 不 建议 使 用 PNG 背景 图 ， 因 为 
你 用 不 着 解决 其 不 支持 Alpha 透明 PNG 图 片 的 问题 。 

O 使 用 Gradient (渐变 ) dR, EA 正 5.5 起 就 提供 支持 了 。 你 可 以 指定 半 透 明 的 颜色 CH 
然 前 提 是 使 用 它 自 身 的 语法 ) 。 将 起 止 色 设置 为 同一 种 颜色 即 可 避免 产生 渐变 。 


























提示 你 可 以 使 用 服务 端 程序 来 自动 生成 PNG， 请 参阅 http://leaverou.me/2009/02/bulletproof- 
cross-browser-rgba-backgrounds。 它 介绍 了 一 个 可 以 根据 你 CSS 中 定义 的 RGBA 值 来 生成 
PNG 图 片 的 PHP 脚本 。 


说 明 之 前 介绍 的 名 为 PIE 的 脚本 同样 可 以 让 RGBA 兼容 三 ， 但 仅 限于 一 些 特定 的 场景 。 更 多 
相关 信息 请 参阅 http://css3pie.com/documentation/supported-css3-features/。 


我 推荐 使 用 第 一 种 或 第 三 种 方案 。 其 中 第 三 种 方案 的 实现 结 末 更 接近 我 们 对 界面 的 要 求 ， 
AVA ve FEH, Anu. Gradient JE BEA MIC FASTA E Ee ay EA], EE 
的 笔画 看 起 来 有 点 儿 不 均匀 (图 2-17)。 你 需要 在 欠 美 观 的 文字 和 更 漂亮 的 背景 之 间 做 出 抉择 。 
而 且 ， 增 加 这 个 着 锐 会 造成 正 8 上 尾巴 消失 不 见 (在 下 7/6 中 它 未 曾 显示 )。 对 此 现象 我 无 法 给 
出 任何 解释 ， 它 只 古 丰 众多 奇怪 问题 中 的 一 个 。 
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This is one of my favorite posts so far. 


Zoe and Cary, I think the comment are 


This is one of my favorite posts so far. 


Zoe and Cary, I think the comment are 


2-17 IE8 F Gradient 滤 镜 应 用 前 (上) Ja CP) WAH. PRIA A 
虽 是 半 透 明 的 ， 但 文字 的 抗 锯 齿 效 果 有 些 不 均 勺 

这 种 情况 下 ， 我 会 说 :“ 让 我 们 选用 害 镜 的 方案 来 实现 半 透 明 背 景 吧 。 既然 对 IE 已 放弃 了 
HA, RAAT SHB AEE. 

我 们 可 以 在 blockquote 的 样式 定义 里 增加 filter 的 规则 一 一 非 耻 将 自动 忽略 它 一 一 但 
正如 我 们 在 第 1 章 中 所 讨论 的 ， 最 好 将 Hack 和 兼容 代码 与 普通 代码 区 别 开 来 。 为 了 把 滤 镜 的 定 
义 分 离 出 来 ， 我们 可 以 为 下 单独 建立 一 个 样式 文件 ,或 使 用 第 1 章 中 所 介绍 的 “html 标签 的 条 
件 注释 技巧 "。 这 里 选择 了 后 者 。 

打开 并 找到 页 面 中 的 html 标签 ， 然 后 将 它 更 改 成 如 下 代码 : 











<!--[if lt IE 7]><html lang-"en" class="ie6"><! [endif]--> 
<!--[if IE 7]»«html lang="en" class="ie7"><! [endif]--> 
<!--[if IE 8]»«html lang="en" class="ie8"><! [endif]--> 
<!--[if IE 9]»«html lang="en" class="ie9"><! [endif]--> 
<!--[if gt IE 9]><html lang="en"><! [endif]--> 

<!--[if !IE]»--»«html lang-"en"»«!--«![endif]--» 








提示 如 果 不 想 手动 输入 这 些 代码 (并 非 责备 ) ， 请 从 本 章 的 示例 文件 中 找到 speech- 
bubble final.html 并 打开 ， 将 这 段 代 码 复 制 到 你 自己 的 文件 中 。 


现在 可 以 开始 为 IE 5.5/6/7 创建 规则 了 ， 由 于 正 8 的 滤 镑 语法 与 它们 不 同 ， 我 们 还 需要 为 
IE8 单 独 书 写 另 外 一 条 。 首 先 创建 正 7 及 之 前 版 本 的 规则 : 


.1e6 blockquote, .ie7 blockquote { 
background: none; 
filter: progid:DXImageTransform.Microsoft.gradient 
(startColorstr=#99A6DADC, endColorstr=#99A6DADC) ; 
zoom: 1; 





说 明 filter MM P HITA 29 Z7 48 E] ERA, RERG e SR ORE, ARR ARAE RE, 





Gradient JE 2H J 0 SE LE ARI BA, LAMEER ERA LEE, IS? 它们 与 
你 所 使 用 的 六 位 数 的 标准 十 六 进 制 代 码 不 同 。 前 两 位 数 表 示 Alpha 透明 度 。 你 可 以 使 用 从 00 到 
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FF 的 任意 十 六 进 制 值 ， 其 中 00 代表 全 透明 而 FF 则 是 完全 不 透明 。 因 此 ，#99A6DADC 将 Alpha 
透明 度 设置 为 99， 等 同 于 我 们 在 HSLA 模式 中 所 使 用 的 0.6; 颜色 值 则 保持 A6DADC， 与 我 们 一 
直 使 用 的 暗 蓝 色 相同 。 

ER SEVER Zh, 我 们 还 在 正 7 及 之 前 版 本 的 规则 里 重 置 了 背景 色 , AES ER 
颜色 。 另 外 ,下 6 及 之 前 的 版 本 还 必须 触发 blockquote 元 素 的 hasLayout 状态 来 使 滤 镜 得 以 
正常 工作 ， 我 们 用 zoom:1; 来 完成 此 工作 。 


说 明 理解 hasLayout 很 重要 。 如 果 你 对 这 个 奇怪 的 “属性 ”还 很 陌生 ， 请 参阅 Ingo chao 所 


撰写 的 文章 “On having layout”: www.satzansatz.de/cssd/onhavinglayout.html”。 


将 RGBA 和 HSLA 值 转换 成 IE 的 Gradient 滤 镜 格式 

X T & IE 3&5, € 4€ f] 5 HSLA 值 相同 的 透明 度 ,你 需要 用 HSLA 的 透明 度 值 ( 本 例 中 是 0.6) 
来 以 23S$， 然 后 将 其 转换 为 十 六 进 制 值 。Robert Nyman 在 http://robertnyman.com/2010/01/11/css- 
background-transparency-without-affecting-child-elements-through-rgba-and-filters 一 文中 介绍 了 
如 何 宛 成 这 些 汞 又 。 

一 个 更 简便 的 方法 是 使 用 Michael Bester 编写 的 工具 : “RGBa & HSLa CSS Generator for 
Internet Explorer" (http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer) 。 输 入 一 
个 RGBA 或 HSLA 值 ， 该 工具 会 自动 将 它 转换 成 对 应 的 Gradient 滤 镜 值 。 


IE 8 无 需 移 除 对 背景 色 的 定义 ， 因 为 它 会 正确 地 忽略 blockquote 所 定义 的 HSLA Fx, 
也 无 需 触发 hasLayout 状态 。 但 是 , 它 在 使 用 滤 镜 的 语法 上 稍 有 不 同 。 请 为 IE 8 增加 如 下 规则 : 
.ie8 blockquote { 


-ms-filter: "progid:DXImageTransform.Microsoft.gradient 
(startColorstr=#99A6DADC, endColorstr=#99A6DADC)"; 








不 同 之 处 在 于 它 使 用 -ms-filter 而 不 是 filter， 而 且 该 属性 的 值 也 必须 包 作 在 51 里 。 
新 语法 更 符合 CSS 规 犯 ， 也 更 符合 其 他 训 览 右 设 计 其 私有 属性 时 的 习惯 。 


23.4 ”无 图 实现 色彩 渐变 


给 气泡 对 话 框 的 育 景 增加 一 些 渐 变 效 坟 可 进一步 增强 它 的 圆润 感 和 立体 感 。CSS3 让 你 不 依 
赖 图 片 就 能 实现 淅 变 ， 它 不 仅 可 以 提升 你 的 开发 速度 ， 还 能 减少 页 面 的 读 取 时 间 ， 正 如 之 前 我 们 
不 靠 图 片 实现 了 圆 角 一 样 。CSS 生成 的 源 变 效 末 还 有 一 个 使 用 图 片 无 法 实现 的 优点 一 一 写 可 以 随 
着 外 部 容 絮 的 尺寸 变化 而 伸缩 和 目 如 ， 这 使 得 它 的 用 途 更 为 广泛 。 

但 遗憾 的 是 ， 本 书 编 所 之 时 CSS3 的 潮 变 还 处 在 研发 阶段 ， 其 语法 制定 还 仅 在 W3C 的 编辑 
ERE, 还 未 形成 一 份 更 完整 的 工作 理 生 或 候选 所 案 。 因 此 ,你 要 明白 其 语法 将 比 我 在 书 中 所 介 








C 国内 的 old9 曾 翻 译 过 此 文 ， 见 http://www.blueidea.com/tech/site/2006/3698.asp , 
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绍 的 其 他 特性 更 可 能 发 生变 动 。 而 且 ， 我 认为 在 有 限 的 泥 围 内 使 用 少量 实验 性 的 CSS 特性 是 可 
行 的 , ASCHER DI bE as ASAE BI Sie), 而 目前 已 支持 该 特性 的 麟 贤 右 也 无 需 担 心 后 续 的 语法 
变化 会 损害 训 览 体验 。 最 坏 (也 是 最 不 可 能 发 生 ) 的 情况 是 ， 它 的 语法 发 生 了 彻底 的 变化 ， 从 而 
使 所 脐 览 如 中 的 新 变 效 果 都 冰 失 了 。 我 认为 这 个 结果 是 可 以 接受 的 。 

你 可 以 用 它 创建 出 线性 渐变 (Linear/Straight Gradients) 和 径 癌 渐变 (Radial/Circular/Elliptical 
Gradients) “， 本 例 中 我 们 只 关注 线性 渐变 。CSS3 里 并 没有 名 为 gradient 的 属性 ， 可 以 将 
linear-gradient 或 radial-gradient 图 数 赋值 给 任何 接受 图 斤 的 属性 ,例如 backgrouna- 
image K list-style-image 属性 (尽管 Firefox 目前 仅 支 持 对 background-image fi FAT ) , 
当 你 想 要 使 用 线性 痢 变 时 ， 必 须 告 诉 训 览 帮 起 始点 、 角 度 和 痢 变 的 起 止 色 。 你 还 可 以 在 起 止 色 之 
间 增 加 一 个 额外 的 颜色 ， 并 指定 每 个 颜色 在 半 变 中 出 现 的 位 置 。 

听 起 来 很 简单 ， 但 不 幸 的 是 ，Firefox 和 Webkit (目前 仅 有 的 完全 支持 渐变 特性 的 浏览 器 ) 
却 使 用 不 同 的 语法 ,Firefox 符合 W3C 的 官方 标准 , 而 Webkit 则 使 用 早期 开发 时 创造 的 一 套 完 全 
不 同 (而 且 相 当 复 杂 ) 的 语法 。 不 仅 如 此 ， 如 果 你 要 实现 同一 种 半 变 ， 具体 到 每 一 条 规则 也 有 多 
种 变数 存在 。 这 着 实 让 人 困惑 。 为 了 快速 入 门 ， 我 们 首先 将 一 个 简单 的 生变 应 用 到 气 移 对 话 框 来 
查看 实际 效果 ， 然 后 再 深入 了 解 整 套 语 法 的 细 六 。 

1. Firefox 及 W3C 的 语法 

Firefox 的 语法 与 正在 制定 中 的 W3C 官方 语法 相同 ， 它 总 体 上 显得 更 简单， 而 且 易 懂 易 用 ， 
所 以 我 们 先 在 Firefox 上 实现 渐变 效果 。 

首先 ， Æ blockquote 规则 的 background-image 属性 里 使 用 -moz-linear-gradient 
PRAHA) Firefox 增加 一 个 线性 潮 变 : 


blockquote { 











position: relative; 
min-height: 40px; 
margin: 0 0 0 112px; 
padding: 10px 15px 5px 15px; 
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 
border-top: 1px solid #fff; 
background-color: hsla(182,442,762$,.5); 
background-image: -moz-linear-gradient ( 
hsla(0,0%,100%, .6), 
hsla(0,0%,100%,0) 30px 
); 


word-wrap: break-word; 


说 明 a RHR PAA TRAD RY km, RERGCEMPR, HRB AUI SE, 


c 也 称 “ 放 射 渐 变 ”"、“ 辐 射 浙 变 ” 或 “ 锥 形 浙 变 ”等 。 
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函数 里 我 们 指定 了 渐变 的 起 始 色 (hsla(0,0%,100%, .6)).、 终 止 色 (hsla(0,0%,100%,0)) 
和 终止 色 的 位 置 (30px)。 由 于 并 未 指定 渐变 的 起 始点 及 其 角度 ，Firefox 将 会 使 用 默认 值 ， 即 从 
顶部 开始 王 直 癌 下 进行 渐变 。( 如 果 确 实 想 要 指定 这 两 个 值 ， 可 以 在 函数 开始 部 分 定义 。 具 体 语 
法 请 参阅 “线性 渐变 的 来 龙 去 脉 ”) 

渐变 的 起 始 色 是 不 透明 度 为 60% 的 白色 , 而 终止 色 则 是 完全 透明 的 白色 (不 透明 值 为 0)。 将 
这 层 半 透明 的 白色 覆盖 于 背景 之 上 会 影响 其 着 色 。 本 例 中 ， 它 产生 的 渐变 效果 是 从 顶部 开始 的 
RUG CX RE PB ATA. (图 2-18)。 当 然 我 们 也 可 以 使 用 真正 的 瞳 蓝 色 ， 但 在 HSLA 或 RGBA 
中 使 用 半 透 明 的 白色 适用 性 更 广 。 比 如 稍 后 我 们 会 将 气泡 对 话 框 的 背景 关 色 改 成 检 色 ,那么 还 需 
要 将 渐变 从 淡 蓝 改 成 淡 检 色 。 但 如 果 是 白色 的 渐变 ， 它 就 可 以 适应 任何 背景 色 。 坚 持 使 用 半 透 明 
的 白色 和 黑色 是 用 来 调整 颜色 深浅 最 聪明 的 方法 。 











Thanks for posting this article. Lots of good info. The only 
comments are so plain. Why don't you apply some CSS3 


I agree with Zoe. Make it cooler looking. 


图 2-18 Tf EHI R (ELT HE aR T 


紧 跟 着 终止 色 的 值 之 后 是 一 个 空格 和 长 度 值 30px。 这 是 用 来 告诉 Firefox 你 希望 将 终止 色 安 
排 在 活 变 开始 30 像素 以 下 的 位 置 ， 接 着 终止 色 将 填 满 剩 下 的 区 域 。 既 然 我 们 的 终止 色 是 全 透明 
的 (白色 )， 则 给 我 们 呈现 出 来 的 就 是 渐变 色 仅 履 盖 了 徘 近 气泡 对 话 框 顶 端的 30 像素 高 的 部 分 。 

这 就 是 在 Firefox 下 实现 渐变 的 方法 ,通常 来 说 ,我 还 会 让 你 复制 (并 粘贴 ) 一 份 background- 
image 的 规则 , 然后 从 这 份 重复 的 代码 中 移 除 -moz- 前 级 来 增加 一 份 不 针对 任何 特定 麟 览 强 的 版 
本 。 但 这 一 次 ， 由 于 官方 的 语法 商 在 早期 的 制定 中 ,我 认为 最 好 还 是 等 它 进入 终结 阶段 再 说 。 我 
们 完成 了 对 Firefox 的 支持 ， 现 在 继续 增加 对 Webkit 的 实现 。 

2. Webkit 的 语法 

针对 Webkit AFRAID AS, Feet blockquote 标签 增加 另 一 个 background-image 属 
性 ， 而 这 一 次 它 包 含 的 是 -webkit-gradient AR: 








blockquote { 
position: relative; 
min-height: 40px; 
margin: 0 0 0 112px; 
padding: 10px 15px 5px 15px; 
-moz-border-radius: 20px; 
-webkit-border-radius: 20px; 
border-radius: 20px; 
border-top: 1px solid #fff; 
background-color: hsla(169,41$,762,.5); 
background-image: -moz-linear-gradient (hsla(0,0%, 
*10092,.06), hsla(0,0%,100%,0) 30px); 
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background-image: -webkit-gradient (linear, 
0 0, 0 30, 
from(hsla(0,0%,100%, .6)), 
to(hsla(0,0%, 100%, 0) ) 
); 
word-wrap: break-word; 


可 见 ，Webkit 的 语法 与 前 一 种 相 比 差异 巨大 而 且 更 为 复杂 。 








径 疝 渐变 
我 们 的 例子 并 未 涵盖 径 向 渐变 的 知识 ， 但 从 以 下 文章 中 可 获得 更 多 信息 。 
O “CSS gradient syntax: comparison of Mozilla and Webkit (Part.2)”， 作 者 Peter Gasston 
(www.broken-links.com/2009/1 1/30/css-gradient-syntax-comparison-of-mozilla-and-webkit-part-2 ) 
O “css gradients in Firefox 3.6", 4E Alix Franquet (http://hacks.mozilla.org/2009/11/css- 
gradients-firefox-36) 


线性 渐变 的 来 龙 去 脉 
Bp oh ee AAA (Image Values) 草案 模块 的 一 部 分 ， 你 可 以 在 http://dev.w3.org/cssweg/ 
css3-images/Zgradients 7,2] È , {2 AAR AA IL www.w3.org/tr/css3-images , 
你 可 以 在 任何 接受 图 片 值 的 属性 中 使 用 linear-gradient X radial-gradient iX 
来 实现 渐变 效果 。 图 2-19 标注 了 linear-gradient 函数 值 每 个 部 分 的 意义 。 
你 不 必 在 使 用 时 包含 图 2-19 所 示 的 所 有 和 参数。 需要 记 住 以 下 几 条 重点 。 
O 在 任何 语法 中 ， 要 实现 一 个 渐变 只 需要 指定 两 种 颜色 。 其 余 的 值 都 是 可 选 的 ， 如 果 不 
填 则 使 用 默认 值 。 
OD 如 果 不 为 颜色 指定 位 置 和 渐变 角度 ,那么 渐变 将 从 顶部 延伸 到 底部 。 
口 可 以 在 涵 数 的 第 一 个 值 里 指定 渐变 的 起 始点 ， 取 值 可 以 是 关键 词 (比如 center) 
或 数字 (比如 20px 或 6035 1em), ， 可 以 取 负 值 。 如 果 使 用 数字 ， 那 么 第 一 个 值 
代表 水 平方 向 上 (X B) 从 多 远 处 开始 渐变 ， 而 第 二 个 值 则 代表 重 直 方向 上 (Y 轴 ) 
从 多 深 处 开始 渐变 。 
口 指定 起 始点 之 后 ,你 可 以 接着 指定 渐变 的 角度 。 它 是 从 水 平 线 到 渐变 线 的 逆 时 针 角 度 ，。 
举例 来 讲 ，0deg 将 产生 从 左 至 右 的 水 平 渐 变 ，90dqeg 则 代表 从 下 至 上 ，180deg 则 从 
右 至 左 ， 而 270deg 则 是 从 上 至 下 。 你 还 可 以 使 用 负 值 。 
口 每 个 颜色 区 间 都 至 少 包 含 一 个 颜色 值 (对 任何 语法 均 适 用 ), 还 有 一 个 可 选 的 值 用 来 指 
定 该 颜色 出 现 的 位 置 。 后 一 个 值 代 表 着 从 起 始点 到 渐变 点 的 距离 ， 起 始点 不 必 是 盒 容 
器 的 边界 。( 图 2-19 p, d XA E EROR 40px 的 地 方 开始 。) 
从 本 质 上 来 说 ， 既 然 background-image 属性 中 的 渐变 是 浏览 器 生成 的 图 片 ， 可 以 使 用 
其 他 CSS 背景 属性 来 控制 它们 ， 就 像 对 待 其 他 图 片 那 样 。 比 方 说 ， 可 以 使 用 CSS3 新 增 的 
background-size 属性 来 控制 渐变 的 尺寸 ,或 用 background-repeat 来 控制 是 否 将 其 平 铺 。 





距离 起 始点 的 长 度 
Fre Eod 


£A In] faz a. HH |] £4, 点 的 长 度 
fF] D£ ER 





linear-gradient(040px270deg,#000,#ff160px,#00003380%) 





起 始 扣 AE ”颜色 区 间 颜色 区 间 颜色 区 间 
图 2-19 linear-gradient 函数 每 个 值 所 代表 的 意义 及 其 产生 的 渐变 效果 ”( 另 见 彩 插图 2-19) 

除了 用 CSS3 渐变 来 实现 高 光 效 果 外 ， 你 还 可 以 将 它 用 于 如 下 场景 。 

口 使 某 些 物体 的 表面 看 起 来 像 按 钮 一 样 呈 现 弧 面 ， 请 参阅 www.webdesignerwall.com/ 
tutorials/css3-gradient-buttons 和 http://blog.brandoncash.net/post/525423850/sexy-css-buttons 。 

口 使 一 些 东 西 看 起 来 更 有 光泽 ， 像 是 金属 、 玻 璃 或 是 CD。 

口 实现 倒影 效果 ,请 和 参阅 www.broken-links.com/2010/03/22/create-a-studio-style-backdrop- 
with-css3 , 

Q 3 LXX) (Vignette) LKR, EAA ARARE AAA RRE RE hA E, WAY 
http://www.broken-links.com/2010/03/22/create-a-studio-style-back-drop-with-css3/ , 

O 为 背景 图 技 合 加 一 个 渐变 玉 实 现 淡 入 淡出 效果 ， 请 参阅 http://atomicrobotdesign.com/blog/ 
htmlcss/make-the-thinkgeek-background-effect-using-css3 , 

O 等 高 多 列 布局 ， 请 和 参阅 http://aext.net/2010/08/css3-sidebar-full-height-background-color, 


表 2-4 ”渐变 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 
不 支持 支持 ，3.6+， 需 要 不 支持 支持 ， 需 要 -webkit- 支持 ， 需 要 -webkit- 
-moz- 前 级 前 级 前 级 


要 使 用 Webkit 的 语法 来 实现 痢 变 ， 首 先 得 指定 产 变 的 类 型 是 线性 还 是 径 同 ， 并 将 其 作为 参 





© 根据 作者 勘 正 ， 图 中 的 文字 空格 间隙 过 小 ， 现 标注 如 下 : linear-gradient (0 40px 270 deg, #000, #fff 
60px, #000033 80%), 
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BFE A -webkit-gradient 国 数 使 用 ， 而 不 是 使 用 linear-gradient BH radial- gradient 
这 两 个 独立 的 函数 。 

然后 需要 指定 水 平和 垂直 两 个 方向 上 的 起 始点 位 置 (本 例 中 是 0 0)， 紧 接着 是 终止 点 的 位 
A (本 例 中 是 0 30)。 它 的 值 可 以 是 关键 词 (如 top 或 left)、 百 分 数 或 像素 值 。 但 奇怪 的 是 : 
如 采 你 使 用 像素 值 ，webkit 要 求 改 值 但 不 包含 单位 值 ， 即 "px"。 因 此 在 本 例 中 ， 告 诉 Webkit 
我 们 希望 痢 变 的 起 始点 位 于 盒 容 右 的 横 回 0 像素 和 纵向 0 像素 处 〈 即 左上 角 的 顶点 ) ， 而 终止 点 
则 位 于 横向 0 像素 和 纵 癌 30 像素 之 处 。 这 将 使 源 变 从 盒 容 强 鸭 顶 部 开始 并 延伸 30 像素 ， 然 后 将 
剩 下 的 区 域 用 终止 色 填 充 起 来 ， 与 之 前 在 Firefox 上 的 处 理 方式 相同 。 

指定 了 起 始点 和 终止 点 之 后 ， 我 们 还 需要 指定 起 止 色 和 终止 色 。 和 Firefox 的 语法 一 样 ， 你 
可 以 使 用 任意 颜色 格式 ， 但 需要 注意 的 是 必须 把 每 个 颜色 包 庄 在 £rom ()  to() E, 

iX/J-webkit-gradient 所 产生 的 效果 与 图 2-18 无 异 。 

Firefox 和 Webkit 之 间 的 语法 差别 难以 记忆 。 季 运 的 是 ， 如 果 你 不 想 ， 大 可 不 必 去 记 住 它 。 
网 上 有 一 些 很 好 的 渐变 生成 工具 ， 可 用 做 虚拟 的 编辑 器 ,创建 渐 变 效 果 ， 然后 再 将 所 需要 的 CSS 
输出 给 你 。 你 要 做 的 只 是 复制 粘贴 而 已 ! 可 以 从 下 列 网 址 找到 这 些 工 具 : http:// 
gradients.glrzad.com , http://westciv.com/tools/gradients 、http://westciv.com/tools/radialgradients 和 





http://www.display-inline.fr/projects/css-gradient , 

3. 针对 其 他 浏览 器 的 兼容 方案 

迄今 为 止 ， 我 们 所 书写 的 CSS 只 能 在 Safari, Chrome 和 Firefox 3.6 及 其 之 后 的 版 本 上 工作 ， 
这 使 得 渐变 成 为 CSS3 Hpi iz SCRE SZ, PAI, EMEA DAN SEF ERT OI ede 
HERR TT ARE Z— (AIR RE EGR mU Se. RMA KS BOL P EBUDT3SBHAPBHERJDI 
a air NL Z2 OSEE CODE — 1 "I LEST. ) 

T FH E Fr, FIERE ZR EA AOR, 最 显而易见 的 方案 便 是 使 用 老 办 法 来 实现 
UAE: 创建 一 个 半 透 明 的 PNG 渐变 图 片 ， 并 将 其 设置 为 blockquote 的 背景 图 并 横向 平 铺 。 请 
务必 将 这 句 CSS 声明 置 于 包含 有 -moz-linear-gradient 和 -webkit-gradient FRAY bac- 
kground-image ĦA ZA, iX EZ BELESCHBEUI AE HJ DU Sa, z& H1 Gs AE AURH) background- 
image 属性 履 盖 指定 真实 图 片 的 同名 规则 。 

当然 ， 创 造 并 使 用 图 片 会 抵消 你 使 用 CSS3 来 实现 渐变 所 获得 的 效率 提升 。Firefox 3.6 不 会 
加 载 它 不 需要 的 图 片 ， 但 Safari 和 Chrome 会 ， 尽 管 它 们 使 用 CSS3 的 闻 变 而 且 并 不 需要 显示 那 
张 图 片 。 这 样 一 来 ， 你 在 Firefox 3.6 上 成 功 保留 了 CSS3 靖 变 的 效率 优势 ， 在 Safari 上 却 没有 。 
就 算 你 依旧 能 够 享受 到 由 CSS3 半 变 带 来 的 其 他 优势 ， 但 效率 却 是 其 中 最 重要 的 优势 。 














有 天 Webkit 线性 渐变 语法 的 更 多 细节 
在 Webkit 的 线性 渐变 中 ， 如 果 你 想 在 起 止 色 之 间 加 入 其 他 的 颜色 ， 可 以 使 用 如 下 语法 : 
color-stopb(50g,#333) 。 在 本 例 中 ，50g 指 定 该 颜色 出 现 的 范围 ， 它 也 可 以 是 一 个 0 至 1 
中 间 的 数值 。#333 是 颜色 值 ， 可 以 是 任意 的 颜色 格式 。 颜 色 区 间 可 以 写 在 起 始 色 和 终止 色 之 
MAZE, SERA AES OBR. 
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需要 获得 更 多 关于 Webkit 语法 的 详细 信息 ， 请 参阅 以 下 文章 。 

口 “Safari CSS Visual Effects Guide: Gradients” (http://developer.apple.com/safari/library/ 
documentation/Internetweb/conceptual/safarivisualeffectsprogguide/gradients/gradients.html ) 

O “CSS gradient syntax: comparison of Mozilla and Webkit ,作者 Peter Gasston (www. 
broken-links.com/2009/11/26/css-gradient-syntax-comparison-of-mozilla-and-webkit) 

O “CSS gradient syntax: comparison of Mozilla and Webkit (part 2) ， 作 者 Peter Gasston 
( www.broken-links.com/2009/11/30/css-gradient-syntax-comparison-of-mozilla-and-webkit- 


part-2) 


正 因 为 Webkit AAI E as AIX — AERIAL, FREI EZ CRE HI ES WRASSE, fu 
那些 不 支持 的 浏览 器 失去 渐变 效果 ， 要 么 使 用 Modernizr (第 1 章 有 介绍 ) 对 支持 渐变 特性 的 浏 
和 质 瑚 隐藏 育 景 图 。 当 然 ， 如 和 你 正 着 手 解决 所 有 来 目 于 制作 和 应 用 靖 变 图 片 时 所 市 来 的 问题 ， 或 
RRUA RIER A A R ar AEH E A mAAR EH CSS3 独 变 。 这 个 问题 没有 标准 答案 ， 但 
我 的 建议 是 要 么 仅仅 使 用 CSS3 来 实现 渐变 ， 要 么 根本 不 用 CSS3 DES PEE LR. 








提示 另 一 个 模拟 渐变 效果 的 方法 是 识 入 box-shadow 效果 , 它 的 支持 度 比 CSS3 渐变 要 好 (4 
然 仍 旧 比 不 上 图 片 )。 稍 后 我 们 将 在 本 章 重 温 box-shadow 这 个 属性 。 


使 用 脚本 。 对 于 IE 6-8， 你 可 以 使 用 PIE 脚本 (http://css3pie.com/documentation/supported- 
css3-features)。 而 对 于 其 他 浏览 器 ， 请 试 试 Weston Ruter 的 “用 Canvas 模拟 CSS 渐变 ” (css- 
gradients-via-canvas) 的 脚本 (http://weston.ruter.net/projects/css-gradients-via-canvas)。 它 作用 于 
支持 HTMLS Canvas TRAJA Aar, AKEn LIE Firefox 2 和 3、Opera 9.64 及 其 之 后 的 版 本 中 实 
现 渐变 。 它 不 支持 于 ,但 你 可 以 组 合 使 用 IE 83 Gradient 滤 镜 来 实现 兼容 。 这 也 就 引出 了 下 一 个 
方案 。 

为 不 同 的 效果 改 用 不 同 的 颜色 。 我 们 之 前 已 经 用 下 的 Gradient J&BE(E blockquotes 创建 了 
一 个 单 色 的 半 透 明 背 景 。 可 以 将 起 始 色 修改 成 更 谈 一 些 的 上 暗 赣 色 来 模拟 CSS3 a5, 

在 所 有 的 正 样式 规则 里 ,将 Gradient 着 镜 中 起 始 色 的 颜色 从 #99&A6DADC 修改 为 #499E3F4EE: 





.ie6 blockquote, .ie7 blockquote { 
background: none; 
filter: progid:DXImageTransform.Microsoft.gradient 
(SstartColorstr=#99E3F4EE, endColorstr=#99A6DADC) ; 
zooms 1; 
j 
.1e8 blockquote { 
-ms-filter: "progid:DXImageTransform.Microsoft.gradient 
(startColorstr=#99E3F4EE, endColorstr=#99A6DADC) "; 
} 


默认 情况 下 IE WWE LE PAY, Akit IE EAS eae RE Firefox 和 Webkit 内 核 


2.3 无 图 的 图 形 效 果 03 


luas ERRE (图 2-20), Æ IE 中 我 们 无 法 像 CSS3 痢 变 那样 控制 颜色 区 间 的 位 置 ， 但 是 
站 镜 可 以 用 来 实现 简单 的 双色 线性 痢 变 。 它 只 适用 于 IES 及 之 前 的 版 本 ,IE 9 并 不 支持 滤 镜 。 
此 ，IE 9 将 不 显示 渐变 ,但 至 少 它 还 有 半 透 明 的 背景 色 。 


提示 更 多 关于 IE Gradient 滤 镜 的 信息 ,请 参阅 http://msdn.microsoft.com/en-us/library/ms532997 
(vs.85).aspx, 


Thanks for posting this article. Lots of good info. The only 
comments are so plain. Why don't you apply some CSS3 


I agree with Zoe. Make it cooler looking. 


2-20 IER Gradient 滤 镜 可 以 模拟 简单 的 CSS3 渐变 (图 中 是 IE 8 的 效果 ) 
请 往 意 ， 如 果 你 为 其 他 训 览 右 瑚 明 过 背景 图 片 来 做 兼容 ,了 正 Ee Gradient Efa., FR] 
之 前 已 针对 正 7 及 之 前 的 版 本 移 除 了 背景 图 ， 但 在 正 8 的 规则 里 还 设 有 。 如 果 为 blockquote 
增加 了 背景 图 (比如 之 前 选择 用 图 片 来 实现 渐变 ), 请 记得 在 正 8 的 规则 里 增加 一 句 background: 


none;, 








说 明 至 此 为 止 的 所 有 修改 都 在 speech-bubble 2.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 
交 件 之 中 。 


2.3.5 ”无 图 实现 盒 状 阴影 


为 了 继续 实现 界面 的 立体 化 ， 我 们 可 以 为 每 个 气泡 对 话 框 增加 阴影 。 这 一 次 ,同样 无 需 使 用 
Fite 
在 CSS3 HA, fF] box-shadow 属性 实现 盒 容 大 的 阴影 。 在 该 属性 中 ， 你 需要 设置 阴影 相对 
盒 容 器 水 平 及 垂直 方 和 同上 的 偶 移 值 、 阴 影 的 颜色 ， 还 可 以 选择 性 地 设置 模糊 半径 《BlurRadius ) 
和 扩展 半径 (Spread Radius ) 。 
{E blockquote 的 样式 规则 里 增加 如 下 三 行 代码 : 


-moz-box-shadow: lpx 1px 2px hsla(0,0%,0%, .3); 
-webkit-box-shadow: 1px 1px 2px hsla(0,0%,0%,.3); 
box-shadow: lpx 1px 2px hsla(0,0%,0%,.3); 


和 之 前 的 border-radius 一 样 ， 以 上 所 有 代码 完成 了 同一 件 事 ,但 每 一 行 都 针对 不 同 的 剖 
览 器 ;截至 本 书 编 撰 之 时 ， 无 前 级 的 box-shadow 属性 将 适用 于 IE 9 和 Opera, 


一 
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每 个 属性 值 的 第 一 个 1px 表示 相对 于 盒 容 帮 的 水 平 仿 移 ， 它 告诉 训 览 右 将 阴影 从 盒 容 禹 的 
Fr lhl toa) 1 像素 。 第 二 个 值 10x 则 是 垂直 偏 移 ， 它 将 阴影 加 下 移动 1 像素 。 你 可 以 使 用 负 值 
来 使 阴影 同 左 和 同上 移动 。 

第 三 个 值 2px 表示 模糊 半径 ， 它 指定 有 多 少 像素 的 阴影 将 被 拉 伸 。 一 个 很 大 的 值 将 使 阴影 
ROE, MBEN 0 将 使 它 有 锐利 的 边界 。 








说 明 box-shadow 属性 中 的 数字 值 必 须 按 照 规 定 的 顺序 书写 ， 但 颜色 值 不 必 写 在 末尾 。 如 果 
你 愿意 ， 也 可 以 将 它 写 在 最 前 面 。 


第 四 个 值 是 阴影 的 颜色 ， 在 本 例 中 是 拥有 30% 不 透明 度 的 墨色。 你 可 以 在 box-shadow 中 
使 用 任意 格式 的 颜色 值 , 但 HSLA 和 RGBA 将 是 你 最 佳 的 选择 一 一 因为 它们 可 以 实现 半 透 明 色 。 
半 透 明度 对 阴影 而 言 显得 相当 受用 ， 因 为 你 也 希望 透 过 阴影 能 看 到 一 些 背 景 。 打 个 比方 ， 如 采 将 
阴影 设置 为 淡 灰 色 , 然后 将 页 面 背景 改 为 暗 海 军 监 ， 最 终 的 效 末 是 一 个 淡 灰 色 的 阴影 悬浮 于 海军 
蓝 的 背景 之 上 。 其 实 你 真正 想 看 到 的 是 一 个 颜色 更 暗 些 的 海军 蓝 阴 影 ， 就 像 我 们 现实 生活 中 所 看 
到 的 阴影 那样 。 在 阴影 中 使 用 HSLA 或 RGBA,， 并 将 颜色 设置 为 纯 黑 《阴影 效 末 ) 或 纯 白 (发 光 
效果 ) 便 可 以 使 阴影 显现 出 下 方 的 背景 色 或 图 片 ,而 且 并 不 需要 每 次 都 相应 地 更 改 阴 影 本 身 的 颜 
色 ， 它 就 好 像 能 自己 调整 颜色 一 般 。 

为 blockquote 增加 box-shadow 属性 以 后 ， 请 保存 页 面 ， 并 在 某 个 不 过 时 的 浏览 如 中 预 
览 一 下 每 个 气泡 对 话 框 右 下 方 的 那个 墨绿 色 阴 影 (图 2-21)。 你 将 会 看 到 阴影 也 注意 到 border- 
radius 的 存在 并 同样 保持 着 圆 角 。 








Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 





Y 
Zoe Gillenwater 
February 28, 2010 


I agree with Zoe. Make it cooler looking. 





Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 10096. 


Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 





Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
http;//forabeautifulweb.com/blog/about/what does browser testing mean today/ 





Asha Gillenwater 
March 10, 2010 





2-21 box-shadow 属性 在 每 个 气泡 对 话 框 的 下 方 增加 了 阴影 
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我 们 的 阴影 效 末 确实 增强 了 立体 感 ,但 当 鼠 标 臣 停 时 我 们 还 可 以 将 气泡 对 话 框 加 “外 ”移动 
一 尽 并 以 此 来 进一步 增强 界面 的 立体 感 。 气 泡 对 话 框 离 背 景 越 远 ,阴影 必须 看 起 来 越 大 。 请 添加 
以 下 的 样 么 规则 来 增加 鼠标 巧 停 时 阴影 的 侦 移 值 : 


blockquote:hover { 


top: -2px; 

left: -2px; 

-moz-box-shadow: 3px 3px 2px hsla(0,0$,09$,.23); 

-webkit-box-shadow: 3px 3px 2px hsla(0,0%,0%,.3); 2 
box-shadow: 3px 3px 2px hsla(0,0%,0%,.3);3; 





提示 “如果 需要 实现 更 复杂 的 阴影 效果 , 可 以 使 用 box-shadow 生成 器 (http://westciv.com/tools/ 
boxshadows) 。 不 过 它 不 支持 扩展 半径 和 内 阴影 (Inset Shadow), 





代码 中 top 和 left 的 负数 值 将 使 气泡 对 话 框 本 身 产生 移动 ， 但 阴影 的 尺寸 会 从 1px 变化 
到 3px， 这 个 移动 显得 更 真实 (图 2-22)。 增 大 阴影 会 使 气泡 对 话 框 显得 更 靠近 用 户 ， 而 不 仅仅 
XE IBID ASH UL, 








Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 


Zoe Gillenwater 
February 28, 2010 


4 
En I agree with Zoe. Make it cooler looking. 


Cary Gillenwater 
March 1, 2010 





This is one of my favorite posts so far. Thanks so much for posting it. I agree 100%. 


Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! | 








Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
http;//forabeautifulweb.com/blog/about/what does browser testing mean today/ 





Asha Gillenwater 
March 10, 2010 














2-22 bate T GIRO AED i zs CE BA E FF E RD TRI PRA 


box-shadow 属性 的 来 龙 去 脉 


box-shadow 属性 是 背景 和 边框 (Backgrounds and Borders) 草案 模块 的 一 部 分 ， 你 可 以 
在 http://dev.w3.org/csswg/css3-background/#the-box-shadow 找到 它 ， 但 最 终 的 版 本 将 出 现 于 
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www.w3.org/tr/css3 -background , 

在 该 属性 中 , 你 需要 设置 阴影 相对 于 盒 容 器 水 平 及 重 直 方向 上 的 偏 移 值 ,还 可 以 设置 阴影 
的 颜色 。 通 第 你 还 可 以 设置 模糊 半径 (上 默认 为 0)， 并 选择 性 地 设置 一 个 扩展 半径 来 控制 阴影 
伸展 GE) 或 收缩 (AE) 的 宽度 。 你 可 以 在 属性 值 的 开头 或 末尾 增加 inset 关键 词 来 使 
阴影 看 起 来 被 内 瞪 于 一 个 金 容 器 。( 扩 展 半 径 和 inset 关键 词 不 兼容 以 下 浏览 器 : Safari 4 及 
之 前 的 版 本 、iOS 3 及 之 前 的 版 本 里 的 Safari、IE 9。) 

你 可 以 在 同一 个 盒 容 器 的 box-shadow 属性 里 实现 多 个 阴影 ， 每 个 阴影 值 用 运 号 分 隔 开 
来 。 它 们 依次 层 登 在 一 起 ， 首 先 被 声明 的 阴影 将 位 于 最 上 方 。 

除了 为 盒 容 器 实现 基本 的 阴影 之 外 ， 你 还 可 以 将 它 用 于 下 列 场景 。 

O 发 光 效 果 (不 设置 位 置 偏 移 ， 并 可 以 选择 性 地 设置 一 个 正 数值 的 扩展 半径 )， 

O 3D 效 采 的 按钮 。 

口 为 盒 容 器 模拟 多 层 边 框 (使 用 多 组 box-shadows 值 ， 并 将 模糊 半径 均 设 为 0 以 使 阴 

影 有 清晰 的 边界 ) ， 请 参阅 http://weston.ruter.net/2009/06/15/multiple-borders-via-css-box- 
shadow, 

口 模拟 渐变 效果 (使 用 box-shadow 的 inset 关键 词 来 实现 内 阴影 ) ,请 参阅 http://girlie- 

mac.com/blog/2010/02/04/css3-box-shadow-with-inset-values-the-aqua-button-rerevisited , 
http://graphicpush.com/experiments-with-css3-border-radius-and-box-shadow 和 http://nim- 


bupani. com/vignettes-with-css3-box-shadows.html , 


表 2-5 box-shadow 的 浏览 器 支持 度 











IE Firefox Opera Safari Chrome 
部 分 支持 ，9+ 支持 ,需要 -moz 支持 ，10.5+ 支持 , 需要 -webkit- 支持 , 需要 -webkit- 
前 经，3.5+ 前 级 前 级 


针对 IE 的 兼容 方案 

IE 8 及 之 前 的 版 本 并 不 支持 box-shadow 属性 ， 但 正如 壮 变 效 朱 一 样 ， 你 可 以 使 用 IE BUS 
镜 来 模拟 实现 。 “DropShadow”( 盒 状 阴影 ) 和 “Shadow”( 阴 影 ) 两 个 滤 镜 正 是 为 实现 阴影 而 设 ， 
而 Glow (AIG) 滤 镜 则 用 于 在 盒 容 器 四 周 实现 发 光 效 果 。 坏 消息 是 这 些 滤 镜 并 不 像 CSS3 的 
box-shadow 属性 那样 提供 诸多 的 目 定 义 参 数 ，Chris Casciano 在 其 名 为 “CSS3 Box Shadow in 
Internet Explorer [Blur-Shadow]” 的 文章 (http://placenamehere.com/article/384/CSS3BoxShadowin- 
InternetExplorerBlurShadow) 中 国明 了 这 点 。 我 不 认为 上 述 任何 着 镜 能 够 实现 我 们 在 本 例 中 所 需 
要 的 效 采 。 

另外 在 该 文中 ，Chris 展示 了 一 个 精妙 的 技巧 ， 即 利用 IE 的 “Blur (EU) 滤 镜 取代 
"DropShadow^, "Shadow" ”和 “Glow ” 滤 镜 来 实现 更 具 真实 感 的 阴影 ， 但 该 技巧 需要 在 HTML 
里 复制 一 份 盒 容 絮 的 副本 ， 并 对 该 副本 进行 泻 染 。 男 一 篇 文章 (http://dev.opera.com/articles/view/ 
cross-browser-box-shadows) 使 用 了 相同 的 技巧 ， 并 且 展 示 了 如 何 使 用 Blur dE Sce Sc BU DARE. 
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PRR AR, BOE AAR ZEA AB PA HTML sca all AS it T h Ay EST) 
Bp, AIPA WETTER UL, ROTA SAR LETT OK BES AH) div 元 素 
并 不 值得 。 因 此 我 们 将 不 会 使 用 Blur ge OR SCARS, TE PRA HEAR EA ABS 








说 明 本 章 前 面 所 介绍 过 的 PIE 和 IE-CSS3 脚本 同样 可 以 在 了 下 下 实现 阴影 。 其 中 IE-CSS3 脚本 
c 


2.3.6 ”无 图 实现 文字 阴影 


为 何 只 有 盒 容 如 享受 所 有 的 乐趣 ， 难 道 文字 束 不 能 有 自己 的 阴影 吗 ? 令 人 高 兴 的 是 ，CSS3 
中 有 个 名 为 text-shadow 的 属性 可 以 做 到 。 

text-shadow 属性 能 为 你 提供 民 好 的 可 访问 性 与 可 用 性 。CSS3 能 将 一 个 效 饰 性 的 图 片 替 换 
成 几乎 相同 的 图 形 效 果 一 一 就 像 在 本 章 已 经 看 到 的 那些 效 末 一 样 , 比如 说 把 一 个 GIF 圆 角 图 替换 
成 CSS 生成 的 圆 角 ， 有 点 儿 “ 以 假 乱 真 ”的 意思 。 那 么 从 这 个 方面 来 讲 ，text-shadovw 属性 便 
是 用 真实 的 文本 替换 掉 了 文字 图 片 。 比 方 说 你 希望 某 段 标题 文字 能 有 阴影 效果 。 在 cexc - shadow 
出 现 之 前 ， 要 实现 这 个 需求 ， 你 可 能 需要 绘制 一 张 包 含 阴 影 及 标题 文字 本 身 的 图 片 ， 并 将 它 显示 
于 你 的 页 面 。 但 面 对 一 张 图 片 , 用 户 却 无 法 通过 缩放 ， 更 改 文字 颜色 、 字 体 等 原本 可 以 针对 纯 文 
本 而 进行 的 一 系列 操作 来 使 文字 更 易 识别 。 然 而 使 用 text-shadow 之 后 ， 这 些 操 探 权 就 回 到 了 
用 户 手 中 。 

对 纯 文本 应 用 text -shadow 效 采 还 可 以 使 文字 和 背景 区 分 得 更 为 明显 ， 从 而 提升 可 读 性 。 
不 知 你 是 否 看 过 含有 “隐藏 式 字 幕 ”(Closed Captioning) “的 电影 ?” 这 些 字幕 的 文字 几乎 都 有 轻微 
的 阴影 或 描 边 装饰 ,以 使 它们 在 各 种 背景 色 下 显得 更 为 醒目 。 给 网 页 中 的 文字 加 上 轻微 的 阴影 后 
样 能 使 可 读 性 得 到 大 幅 提 升 。 

使 用 纯 文本 的 优势 还 包括 : 它 能 够 被 搜索 到 ， 并 可 以 直接 选取 进而 复制 和 粘贴 ， 相 较 于 图 片 
或 Flash 影片 ， 更 方便 你 或 你 的 客户 对 文案 进行 调整 。 

当然 ， 和 其 他 许多 网 页 技术 一 样 ， 当 text-shadow 的 使 用 不 得 其 法 时 反而 会 影响 可 用 性 。 
我 绝对 和 疫 有 让 你 给 所 有 的 文本 都 加 上 阴影 效 末 ， 因 此 影响 到 页 面 可 用 性 的 反面 教材 不 胜 枚 举 。 必 
须 始终 确保 文字 在 没有 阴影 效果 时 同样 可 以 被 清晰 地 辨识 。 但 使 用 得 当 的 话 text-shadow 绝对 
可 以 成 为 又 一 款 得 意 工 具 。 

text-shadow 的 效 末 听 起 来 相当 不 错 吧 ? 你 该 如 何 利 用 它 呢 ? 

1. 使 用 阴影 来 凸显 文字 

让 我 们 用 text-shadow 给 当前 鼠标 县 停 的 评论 增加 更 醒目 的 效果 。 请 在 blockquote: 
hover 的 规则 里 添加 一 行 代码 : 


text-shadow: lpx lpx lpx hsla(0,0%,100%,.7); 
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仅 能 通过 某 些 特殊 设备 才能 看 到 的 一 种 字幕 ， 通 党 供 听 障 人 士 使 用 。 
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它 的 语法 和 box-shadow 几乎 完全 相同 (唯一 的 区 别 就 是 你 不 能 为 text-shadow 设置 扩 
展 半 径 和 inset 关键 词 )。 它 同样 有 水 平 偏 移 、 垂 直人 篇 移 、 可 选 的 模糊 半径 和 颜色 。 不 同 的 是 ， 
这 一 次 你 不 需要 增加 浏览 各 前 级 : Firefox, Safari, Chrome 和 Opera 全 部 支持 标准 的 
text-shadow 属性 。 图 2-23 展示 了 当 鼠 标 悬 停 于 某 个 blockquote 时 ， 其 文字 显现 出 的 轻重 
的 阴影 效果 。 





提示 与 box-shadow 相同 ，text-shadow 的 颜色 使 用 HSLA 或 RGBA 的 羊 透明 色 时 能 获得 
最 佳 效 采 ， 





Zoe and Cary, I think the comment area is going ! 





I really enjoy reading your blog, but what happer 
http;//forabeautifulweb.com/blog/about/what di 
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说 明 至 此 为 止 的 所 有 修改 都 在 speech-bubble 3.html 页 面 里 ， 它 在 你 所 下 载 的 本 章 的 示 
Bl CHEZ FP 


评论 者 姓名 和 评论 日 期 是 另外 两 个 适合 增加 阴影 效果 的 地 方 , 因为 它们 的 字号 都 相当 小 而 且 
文字 下 方 的 背景 又 很 花哨 。 给 它们 增加 一 点 细微 且 清 晰 的 阴影 可 以 使 它们 更 加 跃然 “ 纸 ” 上 且 更 
方便 阅读 。 

请 在 现 有 的 .comment-meta 规则 里 增加 如 下 一 行 代码 : 

text-shadow: 1px 1px 0 hsla(0,0%,100%,.7); 

这 名 代码 所 产生 的 效果 很 不 起 眼 , 但 依旧 值得 去 做 。 要 是 给 如 此 迷你 的 文字 增加 很 粗 的 描 边 
不 仅 显 得 很 怪 , 而 且 很 可 能 使 它们 更 难 阅 读 。 而 我 们 所 添加 的 细微 阴影 可 以 提升 对 比 度 ， 从 而 使 
文字 更 容易 辨识 一 些 (图 2-24), 








提示 ”如果 想 要 实现 更 复杂 的 阴影 效果 ,可 以 使 用 text-shadow 生 成 器 (http://westciv.com/tools/ 


shadows) , 
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2-204 评论 者 姓名 及 评论 时 间 下 方 的 实 边 阴影 使 文字 比 修改 前 显得 更 为 醒目 


text-shadow 属性 的 来 龙 去 脉 
text-shadow 是 文本 模块 的 一 部 分 ,你 可 以 在 WWW.W3.org/tr/css3-text 找到 它 。 它 原 属于 
SS 
在 该 属性 中 ,需要 设置 阴影 的 颜色 以 及 它 在 水 平和 垂直 两 个 方向 上 相对 于 文字 本 身 的 位 置 
偏 移 。 还 可 以 设置 模糊 半径 ， 留 空 则 取 默 认 值 0。 
可 以 在 同一 段 文本 的 text-shadow 属性 里 实现 多 个 阴影 ， 每 个 阴影 值 用 各 号 分 陪 开 来 。 
它们 依次 后 登 在 一 起 ， 首 先 声 明 的 阴影 将 位 于 最 上 方 。 
除了 用 它 为 文本 实现 基本 的 阴影 之 外 ， 还 可 以 将 它 用 于 如 下 场景 。 
O 发 光 文 字 ， 请 参阅 http://desandro.com/articles/the-new-lens-flare , 
O 凸版 、 旬 刻 、 狂 空 或 浮雕 效果 的 文字 〈 在 一 边 使 用 淡色 阴影 ， 在 另 一 边 则 使 用 深 色 阴 
#3), ， 请 参阅 http://sixrevisions.com/css/how-to-create-inset-typography-with-css3 , 
口 火焰 文字 UE 4e X EL TE edi EH ),U AX www.css3.info/preview/text-shadow。 
O 模糊 文字 〈 使 用 与 文字 相同 颜色 的 阴影 ， 或 干脆 使 用 透明 文字 ) ,请 参阅 http://simurai. 
com/post/684792689/text-blur , 
O 4XFASHR3DAR (使 用 多 层 阴 影 实 现 ) , 请 参阅 http://css-tricks.com/3d-text-tower , 
O 在 http://maettig.com/code/css/text-shadow.html 还 可 以 找到 更 多 text-shadow 的 效果 示 
例 ， 它 们 之 中 的 一 部 分 更 具 实 用 性 ， 但 所 有 的 例子 都 可 以 用 来 激发 你 的 创造 力 。 
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表 2-6 text-shadow 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


不 支持 x x x xd 


2. 针对 IE 的 兼容 方案 

HZ Bi Pri FAY IE HJ DropShadow, Shadow 和 Glow path n] LA FAR Sz Eb c AS HJ DAR, 
mA DC DERIT RA ASCE SALA OCR IN SHES Wi — 3, RARR RA Hx 
PAA. WR EHA Rae, IE ACM RAR Aas RZ, Peer AGER BIC 
字 上 。 

不 焉 的 是 ， 当 上 述 任意 一 个 滤 镜 应 用 于 文字 时 ， 它 会 使 文字 变 得 粗粮 难看 ,就 像 我们 在 使 用 
渐变 滤 镜 时 把 文字 变 得 不 均匀 一样 ( 详 见 图 2-17 和 图 2-20), 但 这 一 次 效果 尤其 严重 。 在 本 章 的 
气泡 对 话 框 一 例 中 , 我 认为 这 一 点 确实 会 影响 可 读 性 , 更 何况 增加 阴影 的 目的 本 身 就 是 为 了 增强 
文字 的 辨识 度 。 因 此 ， 在 这 里 我 们 不 会 对 文字 使 用 任何 IE 的 滤 镜 。 如 果 你 仍 希 望 增加 滤 镜 ， 请 
从 http://msdn.microsoft.com/en-us/library/ms673539(VS.85).aspx 獒 取 其 详细 语法 。 网 上 还 有 两 个 
使 用 IE WA jQuery 插件 : http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery 


和 www. hintzmann.dk/testcenter/js/jquery/textshadow , 











说 明 ”如果 你 正在 使 用 Mootools 框架 ， 或 许 会 想 要 试 试 它 自己 的 文字 阴影 脚本 ， 该 脚本 同时 适 
用 于 IE feat IE 3] 3,23: http:/pr0digy.com/mootools/text-dropshadows , 


24 头像 的 变形 效果 


我 们 已 经 完成 了 所 有 针对 气泡 对 话 框 的 修饰 , 接 下 来 是 不 是 该 轮 到 这 些 綦 靠 在 对 话 框 旁 边 的 
头像 图 片 了 ? 我们 当然 可 以 把 之 前 所 学 到 的 CSS3 把 戏 重要 一 遍 ， 但 这 一 次 还 是 试 试 CSS3 的 新 
特性 变形 (Transform) 吧 。 





说 明 Firefox 目前 还 不 允许 对 图 片 元 素 使 用 -moz-border-radius 属性 ,所 以 很 可 惜 ， 你 无 法 
iz. Firefox 下 对 头像 使 用 圆 角 。 


2.4.1 什么 是 “变形 ” 


变形 是 一 些 效 果 的 集合 ， 每 个 效果 都 被 称 作 变 形 有 函数 (Transform Function) ， 它 们 可 以 操控 
盒 容 万 发 生 旋转 、 缩 放 和 倾斜 等 变化 。 这 些 效 末 在 之 前 都 需要 依赖 图 片 、Flash 或 JavaScript 才能 
完成 。 而 使 用 纯 CSS 来 完成 这 些 变形 则 无 需 加 载 这 些 额外 的 文件 ， 再 一 次 提升 了 效率 ， 不 仅仅 
是 你 的 开发 效率 ， 还 有 页 面 本 导 的 执行 效率 。 
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transform 属性 的 来 龙 去 脉 
transform 属性 是 3D 变形 (3D Transforms) 模块 的 一 部 分 , 你 可 以 在 www.w3.org/tr/css3- 
3d-transforms 找到 它 ,也 可 以 在 2D 变形 (2D Transforms) # 3%, www.w3.org/tr/css3-2d-transforms 
上 找到 它 。 所 有 的 2D BH BAUS FT 3D 规范 ， 因 此 你 可 以 只 查阅 3D 规范 即 可 。 
变形 函数 有 很 多 ， 这 里 仅 列 出 最 重要 且 支 持 度 最 广 的 那些 。 
O translate 在 指定 义 和 YY 坐标 后 ， 能 将 物体 移动 到 新 的 位 置 。 取 正 值 是 向 右 、 下 方 
移动 ; 反之 ， 取 负 值 则 向 左 、 上 方 移动 。 示 例 : translate(20px, -10px), 
O scale 能 将 物体 编 放 和 倍 。 指 定 负数 值 将 使 物体 发 生 翻 转 。 要 使 物体 变 小 ， 请 取 0 至 
] 之 间 的 小 数 。 如 果 你 指定 了 一 对 用 过 号 分 隔 开 来 的 数 ， 那 么 前 一 个 数 就 是 横 轴 的 缩 
放 值 ， 而 后 一 个 则 用 来 在 纵 轴 上 进行 缩放 。 示 例 : scale(2.5)Rscale (1, .5), 
O rotate 可 将 物体 旋转 XX 角度 (单位 是 deg)。 正 数值 按时 针 方 向 旋转 ; ALN) Hee 
时 针 旋 转 。 示 例 : rotate(45deg), 
O skew 能 使 物体 按 X 角度 发 生 倾 针 (单位 也 是 deg)。 用 各 号 分 陪 的 前 后 两 个 值 分 别 控 
制 横 轴 或 纵 轴 的 倾斜 度 ， 如 果 仅 使 用 一 个 值 ， 那 么 默认 纵 轴 的 倾斜 度 为 0。 示例: 
Skew(10deg, 20deg), 
你 可 以 在 同一 个 transform 属性 中 使 用 多 个 变形 总数 ， 并 用 空格 将 它们 分 隔 开 玉 。 变 形 
将 按 你 书写 的 顺序 进行 。 
你 还 可 以 用 transform-origin 属性 来 指定 变形 发 生 的 原点 ， 取 值 可 以 是 关键 词 、 数 值 
AADA, BEA center, 
当 你 对 菜 个 物体 进行 变形 时 ， 周 围 的 其 他 物体 并 不 会 让 路 给 它 (类 似 于 相对 定位 )。 该 物 
体 将 被 置 于 洽 染 流程 (Flow) 的 首位 ， 然 后 才 开 始 变形 。 
除了 用 它 来 旋转 头像 之 外 ， 你 还 可 以 将 它 用 于 如 下 场景 : 
Q 妆 饼 标 悬 停 时 ， 增 加 链接 、 按 钮 或 表格 行 的 尺寸 ; 
当 鼠 标 巧 停 时 ， 将 一 个 缩 略图 放大 显示 : 
按 某 种 角度 摆 放 的 照片 (比如 说 去 打造 一 种 照片 被 随意 铺 于 来 上 的 场景 ); 
按 某 种 角度 排列 的 便利 贴 (Sticky-note); 
标签 云 (Tag Cloud) 中 被 不 规则 排列 的 标签 (请 参阅 http://code.almeros.com/how-to- 
create-a-css3-enabled-tag-cloud) ; 
O 倾 针 的 盒 容器 或 图 片 CARENA); 
口 页 面 顶 角 处 的 微型 Banner; 
O 边栏 文字 (比如 用 来 制作 流行 的 博客 日 期 章 ) (请 参阅 http:/snook.ca/archives/html - 
and css/css-text-rotation) ; 
O 可 打印 的 折合 卡片 (请 和 参阅 http://natbat.net/2009/may/21/pocketbooks) ; 
口 应 用 了 滑 入 滑 出 效果 的 幻灯 片 (使 用 translate 4%) (请 参阅 http://css3.bradshawen 
terprises.com/slide2/) ; 
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O 3 SEN SORTED RH translate 有 函数 ) (请 参阅 http://creativefan.com/css3-tutorial- 
create-card-pockets-how-to) ; 

a 3D 立方 体 (使 用 2D skew HARM) (请 
how-to-create-3d-cube-with-css3.html) , 


参阅 http//depotwebdesigner.com/tutorials/ 


表 2-7 ”2D 变 形 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 
不 支持 支持 ,需要 -moz- ”支持 ,需要 -o- 前 级 ， ”支持 , 需要 -webkit- ”支持 ,需要 -webkit- 
前 级 ，3.5++ 10.5+ ate 前 级 


表 2-8 3D 变形 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 


不 支持 不 支持 不 支持 支持 , 需要 -webkit- 前 级 ,5+ 不 支持 

和 text-shadow 类 似 ， 变形 有 些 时 候 也 可 以 将 某 些 图 片 棱 换 成 真正 的 纯 文 本 来 提升 可 用 性 
和 可 访问 性 。 比 如 说 你 想 使 某 个 特性 列表 块 或 广告 文字 旋转 一 些 角 度 ,在 变形 这 一 特性 出 现 之 前 ， 
可 能 需要 绘制 一 张 包含 文本 的 图 片 并 将 它 使 用 在 你 的 页 面 里 。 这 种 图 片 的 访问 体验 并 不 好 ， 因 为 


可 能 需 
其 文本 既 不 可 搜索 ， 也 会 耗费 更 多 的 绘制 和 修改 时 间 。 
很 显然 你 不 会 对 所 有 的 页 面 文本 都 使 用 倾斜 和 旋转 效果 , 那样 做 绝对 有 三 可 读 性 ! 但 少量 地 


用 变形 蔡 代 那些 原本 需要 用 图 片 或 Flash 才能 完成 的 文字 效 末 ， 能 切实 提升 可 访问 性 。 











2.4.2 W$ KREA 
让 我 们 来 看 看 旋转 头像 所 用 到 的 变形 代码 。 请 在 样式 表 里 增加 以 下 规则 : 


.comment-meta img { 
-moz-transform: rotate(-5deg); 
-o-transform: rotate(-5deg) ; 
-webkit-transform: rotate(-5deg) ; 
transform: rotate(-5deg) ; 


JOHAR transform AREER AGS SITE IT Al bar oct, Bell HE CCE Ree A T R 


说 明 你 可 以 使 用 这 个 小 巧 的 CSS 变形 生成 器 来 替 你 书写 许多 不 同 效 果 的 变形 代码 ，http:/wes- 
tciv.com/tools/transforms 。 


WA Br 


transform 属性 (目前 也 包括 另外 三 个 需要 增加 浏览 器 前 缀 的 私有 属性 ) 会 告诉 浏览 器 你 
想 应 用 一 个 变形 效果 。 然后 指定 想 要 使 用 的 那个 特定 的 变形 函数 是 rotate, 接着 是 旋转 的 度数 ， 
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单位 是 seg， 值 为 S。 你 可 以 使 用 正 值 或 负 值 ， 其 他 不 同 变形 畏 数 接受 不 同类 型 的 值 ， 一 个 形 如 
-5deg 的 值 对 于 scale 函数 来 讲 没 什么 意义 ,不 是 吗 ? 但 最 终 它们 的 使 用 语法 都 一 样 . 
transform: function(measurements) ; 
你 还 可 以 使 用 transform-origin 属性 来 指定 变形 发 生 的 初始 点 ， 比 如 物体 的 中 心 点 或 右 
上 和 角 的 项 点。 其 默认 值 是 绝对 中 心 点 ， 正 符合 本 例 的 需求 ， 因 此 不 需要 再 增加 一 个 
transform-origin BMS, 


说 明 ALB ZA, Chrome 上 头像 图 片 被 旋转 后 的 抗 锯 次 效果 非常 糟糕 ， 图 片 变 得 很 难看 ， 
而 且 没 有 解决 方案 。 你 可 以 选择 移 除 包含 -webkit- 前 级 的 那 名 定义 ， 但 这 样 一 来 Safari 
上 也 没有 旋转 效果 了 ， 或 者 你 可 以 选择 妃 受 这 难看 的 效果 。 


现在 请 保存 代码 并 在 训 览 大 中 刷新 页 面 。 你 可 以 看 到 头像 已 经 发 生 了 旋转 ( 见 图 2-25)。 





Zoe Gillenwater 
February 28, 2010 


Cary Gillenwater 
March 1, 2010 


Faith Mickley 
March 1, 2010 





Asha Gillenwater 
March 10, 2010 


2-25 rotate 变形 函数 旋转 了 头像 图 片 


针对 IE 的 兼容 方案 

IE 的 Matrix (和 矩阵) 滤 镜 可 以 模拟 若干 CSS3 变形 效果 。 遗 憾 的 是 ， 你 必须 进行 一 系列 复 厅 
的 矩阵 计算 才能 找到 适用 于 该 滤 镜 所 使 用 的 值 。 我 无 法 在 此 细 述 计算 的 方法 GE OR 
是 一 本 Web 设计 类 书籍 了 ), 如 果 你 对 数学 不 是 极端 奖 迷 ,我 所 能 做 的 束 是 回 你 推荐 一 款 名 为 “IE 
CSS3 变形 效果 转换 如 ”的 线 上 工具 ， 开 发 者 是 Zoltan Hawryluk 和 我 。 

要 使 用 这 款 转 换 答 ， 请 在 第 一 步 的 输入 框 中 输入 rotate(-5deg) 和 任意 宽 、 高 的 值 (我 们 
不 会 使 用 宽 和 高 ， 但 对 于 这 款 工具 来 说 它们 是 必 填 的 ) 。 接 着 点 击 “Translate to IE Matrix” (转换 
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7j IE Matrix 格式 ) 按钮 。 第 二 步 便 会 显示 两 段 代码 ， 其 中 一 段 适 用 于 支持 CSS3 的 浏览 带 ， 而 男 
一 段 则 适用 于 下 (WE 2-26)。 


| Translate to IE Matrix 








图 2-26 转换 器 会 将 你 填 入 的 CSS3 2D 变形 效果 代码 转换 为 下 Matrix 滤 镜 格式 
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复制 适用 于 TE HABE RAS, JPN SS ARES eos, IMEE CSS 中 的 注释 : 


#transformedObject { 
-ms-filter: "progid:DXImageTransform.Microsoft. 
4Matrix(Mlls0.9961946980917454, M12=0.08715574274765871, 
4M212-0.08715574274765871, M2220.9961946980917454, 
~ SizingMethod='auto expand')"; 
filter: progid:DXImageTransform.Microsoft.Matrix( 
MIIs0.9961946980917454, 
MIZS0.08715574274755971,; 
M212-0.08715574274765871, 
M2220,9961946980917454, 
SizingMethod-'auto expand'); 
margin-left: -11px; 
margin-top: -11px; 





























} 

这 段 样 式 规则 包含 了 适用 于 正 6 和 正 7 的 filter 属性 ,还 有 针对 了 下 8 而 设 的 -ms-fEiltez 
属性 ,需要 注意 的 是 ,上 述 代 码 中 -ms-filter 属性 的 折 行 符 是 为 了 照顾 本 书 宽 度 而 人 为 添加 的 ， 
并 非 由 转换 器 处 理 而 成 。 请 确保 你 在 使 用 时 -ms-filter 的 属性 值 在 同一 行 ， 否 则 将 不 会 生效 。 
而 filter 属性 是 否 包 含 折 行 则 无 关 紧要 。 添加 margin (外 补丁 ) 值 是 因为 EFA RE fh il bt 
絮 那 样 使 用 统一 的 变形 原点 ， 如 不 添加 则 头像 图 片 将 会 遮盖 评论 者 的 姓名 。 因 此 , 添加 外 补丁 或 
使 用 相对 定位 可 以 让 头像 的 位 置 与 其 训 览 奉 保 持 一 致 。 

现在 我 们 需要 更 改选 择 器 以 匹配 我 们 希望 发 生变 形 的 元 素 , 在 本 例 中 即 .comment -metaimg。 
我 们 还 要 将 这 条 单独 的 规则 拆 分 成 两 条 : 其 中 一 条 针对 IE6 和 IE7， 男 一 条 针对 IE 8。 请 确保 两 
条 规则 都 包含 了 外 补丁 值 的 定义 。 

.1e6 .comment-meta img, .ie7 .comment-meta img { 

filter: progid:DXImageTransform.Microsoft.Matrix( 
M11=0.9961946980917454, 
M12=0.08715574274765871, 
M21=-0.08715574274765871, 
M22=0.9961946980917454, 
SizingMethod-'auto expand'); 


margin-left: -11px; 
margin-top: -11px; 

















} 
.1e8 .comment-meta img { 
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix( 


MITSD.9961946980917454...M1220.0571557427478597.1, 
4M212-0.08715574274765871, M22=0.9961946980917454, 
41 SizingMethod='auto expand')"; 

margin-left: -11px; 

margin-top: -11px; 











] 
如 果 你 保存 页 面 并 在 了 正中 预览 其 效果 ， 会 发 现 它 在 正 7 上 工作 正常 ， 但 在 IE6 上 图 片 的 顶 
部 被 截断 ， 而 且 在 TE 8 上 图 片 会 轻微 地 遮盖 评论 者 的 姓名 ( 见 图 2-27), 


` 
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Zoe Gillenwater 
February 28, 2010 


Cary Gillenwater 
March 1, 2010 






alth Mickley 
March 1, 2010 


Asha Gillenwater 
March 10, 2010 


图 2-27 IES8 下 旋转 获 末 正常 ， 但 头像 的 角 会 遮盖 住 评 论 者 的 姓名 
IE 6 的 问题 是 由 图 片 的 负数 外 补丁 值 引 起 的 ， 如 采 使 用 负 值 将 某 个 元 素 移 到 其 盒 容 如 之 外 ， 
那么 IE 6 不 会 显示 被 移出 的 那个 部 分 。 要 修正 这 个 问题 ,请 为 IE6 和 IE7 的 规则 添加 position: 
relative, 


.1e6 .comment-meta img, .ie7 .comment-meta img { 

filter: progid:DXImageTransform.Microsoft.Matrix( 
M11=0.9961946980917454, 
MIi2Z=0 087155 74274765371, 
M21=-0.08715574274765871, 
M22=0.9961946980917454, 
SizingMethod='auto expand'); 

margin-left: -11px; 











margin-top: -11px; 
position: relative; 
} 
而 下 8 的 覆盖 问题 则 是 因为 我 们 添加 的 外 补丁 值 和 其 他 已 存在 的 样式 产生 了 冲突 。 让 我 们 将 
负数 外 补丁 值 的 方案 更 换 为 相对 定位 吧 .: 
.1e6 .comment-meta img, .ie7 .comment-meta img { 
filter: progid:DXImageTransform.Microsoft.Matrix( 
M11=0.9961946980917454, 
M12=0.08715574274765871, 
M21=-0.08715574274765871, 


M22=0.9961946980917454, 
SizingMethod='auto expand') ; 











position: relative; 
top: -5px; 
left: -5px; 
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.1e8 .comment-meta img { 
-ms-filter: "progid:DXImageTransform.Microsoft. 
3aMatrix(M11-0.9961946980917454, M12-0.08715574274765871, 
3M21--0.08715574274765871, M22=0.9961946980917454, 
~- SizingMethod='auto expand')"; 
position: relative; 
top: -5px; 
left: -5px; 








说 明 请 记 住 ，-ms-filter 属性 中 的 折 行 符 均 是 为 了 方便 排版 而 添加 。 请 确保 你 在 使 用 时 将 
它们 书写 在 同一 行 。 


经 过 这 些 修改 ,在 IE 6 至 下 8 上 头像 终于 可 以 与 其 他 浏 蜗 强 保持 相同 的 旋转 角度 了， 而 且 
它们 也 不 会 遮盖 到 下 方 的 评论 者 姓名 或 右 侧 的 评论 内 容 了 。 

除了 直接 应 用 Matrix 滤 镜 以 外 ， 你 还 可 以 让 脚本 在 页 面 执行 时 默默 地 帮 你 解决 这 个 问题 。 肢 
本 的 优势 在 于 它 可 以 帮助 你 更 轻松 地 创造 出 基于 变形 效果 的 动画 。 这 计 同 样 是 由 Zoltan Hawryluk 
编写 的 脚本 cssSandpaper (www.useragentman.com/blog/csssandpaper-a-css3-javascript- library) 使 若 
FOTEK AAR., WE, RGBA 和 HSLA 等 特性 在 IE ERX. 55 —#KEA Paul Bakaus 基 
于 jQuery 编写 的 和 谷 单 脚本 Transformie (http://paulbakaus.com/?p=11) 同样 能 解决 兼容 问题 。 
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至 此 我 们 已 完成 所 有 和 针对 评论 区 域 的 修饰 工作 , 现在 可 以 在 一 些 疝 不 落伍 的 训 览 郑 上 检查 我 
们 的 工作 成 果 了 ,你 看 到 的 结果 应 该 和 图 2-28 一 致 。 相 较 于 图 2-1 中 所 展示 的 那个 基础 页 面 , 并 
没有 发 生 本 质 的 改变 ， 但 是 完成 版 的 页 面 在 视觉 上 显得 更 丰 昌 和 独特 。 








Thanks for posting this article. Lots of good info. The only thing Istill don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 





Zoe Gillenwater 
February 28, 2010 


y 
I agree with Zoe. Make it cooler looking. 





Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 100%. 


Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 





Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
y http;//forabeautifulweb.com/blog/about/what. does browser testing mean today/ 


Asha Gillenwater 
March 10, 2010 





2-28 Firefox 3.6 上 经 过 CSS3 改造 后 的 页 面 ( 另 见 彩 插图 2-28) 
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IE 会 缺失 一 些 效果， 但 总 体 上 看 起 来 还 是 非常 接近 图 2-28 所 展现 出 来 的 效果 的 〈 图 2-29), 
存在 一 些 细小 的 不 同 没 有 什么 同 题 ， 我 们 所 增加 的 效果 都 纯粹 用 于 装饰 ， 更 何况 IE 用 户 其 实 根 
本 不 会 知道 他 们 所 访问 的 页 面 缺 少 了 一 些 东 西 。 即 使 完全 不 添加 本 革 中 所 有 针对 IE 所 写 的 兼容 
HR (COREE), PRAT OUI ZE TE 8 及 之 前 的 版 本 上 依旧 会 如 图 2-1 所 展示 的 那样 完全 可 用 而 且 
MATE A. 


说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 speech-bubble final.html 页 面 里 , 它 在 你 所 下 载 的 本 章 
的 示例 文件 之 中 。 


Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog Thanks for posting this a ticle. Lots of good info. The only thing I still dort really understand ts why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? comments are so plain. Why don't you apply some CSS3 and jazz them up? 
Zoe Gilenwater 
Druary 28, 2010 
En Lagree with Zoe. Make it cooler looking. | agree with Zoe. Make it cooler looking. 
2010 


a This is one of my favorite posts so far. Thanks so much for posting it. I agree 100%. 
Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 


This ts one of my favorite posts so far. Thanks so much for posting it I agree 100%. 
Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 


I really enjoy reading your blog but what happens when I put a long URL in my comment text like this one: 


hitp//forabeautifulweb.com/blog/about/what, does, browser, testing, mean, today/ http.//forabeautfulweb com/blog/about/what does browser testing mean today / 





I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
emat 


ter Asha Gibenwater 
th 10, 2020 March 10, 2010 


Thanks for posting this article. Lots of good info, The only thing 1 still don't really understand is why these blog 
comments are $0 plain. Why don't you apply some C553 and jazz them up? 


Zoe Gillenwater 
prey 28, 201 
M Lagree with Zoe. Make it cooler looking. 
Cary Gillemwater 
4 p This is one of my favorite posts so far. Thanks so much for posting it. 1 agree 100%. 
S t$ Zoe and Cary, | think the comment area is going to look great by the end of the chapter, Just wait and see! 
Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when | put a long URL in my comment text, like this one: 
4 httpz//forabeautifulweb.com/blog/about/what, does browser testing mean today/ 
ha Gillenwater 


Al 2-29 页 面 在 了 下 8 (7: E). IE6 CR E) KESMAR (ET) 中 并 不 显示 我 们 所 
添加 的 任何 CSS3 效果 ,但 页 面 看 起 来 依旧 漂亮 而 且 可 用 ( 男 见 彩 插图 2-29) 











第 2 革 主 要 讲述 了 在 不 使 用 图 片 的 情况 下 如 何 使 用 CSS3 创作 图 像 效 来 。 而 在 这 一 章 中 ， 我 
们 会 大 量 使 用 图 片 ， 但 是 通过 运用 CSS3 属性 ， 可 以 用 更 精简 的 标记 来 使 用 这 些 图 片 ， 并 且 能 实 
现 之 前 CSS2.1 无 法 实现 的 一 些 效果 。 你 也 会 在 这 一 革 中 了 解 到 如 何在 不 借助 Flash、 图 片 或 者 脚 
本 的 情况 下 ， 在 页 面 中 使 用 特定 的 非 Web 安全 字体 ， 其 至 在 IESU Z LU REESE. ZB 
AGL, CCS3 能 够 让 我 们 通过 使 用 这 些 图 片 和 字体 让 一 个 Web 页 面 看 起 来 和 一 页 真实 的 纸 质 笔记 
Te. 





你 将 学 到 

我 们 将 会 使 用 以 下 这 些 CSS3 的 属性 和 概念 来 创作 一 页 纸 质 笔 记 : 

O background-size 属性 可 以 让 背景 图 片 与 文本 同步 缩放 ; 

DGE ERN EEqzxxms5; 

O border-image 属性 可 以 创建 图 片 边框 ; 

Q background-clip 属性 可 以 让 背景 图 片 的 位 置 偏 移 不 再 有 边框 的 限制 ; 
O @font-face 规则 可 以 在 页 面 中 引入 特定 字体 。 


3.1 基础 页 面 


在 Web 设计 上 总 有 一 种 流行 趋势 是 模拟 真实 物体 的 表现 ， 比 如 便利 贴 或 者 文件 来 。 如 来 希 
望 某 个 页 面 上 的 内 容 看 起 来 像 书写 在 一 页 真正 的 纸 上 , 你 应 该 做 的 第 一 件 事 是 为 这 个 页 面 设 定 一 
个 纸 质 线条 笔记 页 的 背景 图 像 ， 图 3-1 展示 了 这 个 基础 的 页 面 。 


England Trip 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our Vermont 
vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & Prejudice. 
You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 


Itinerary 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London on June 
3. We rented a car for the entire non-London portion of our trip, so we were able to explore around quite a bit. You can 
download the documents listed below to get an overview of where we went and what we did each day. 





DOWNLOAD: Itinerary (PDF) Itinerary (Word) Map of trip locations (PDF) 


Derbyshire 


We visited Derbyshire on the first three days of our trip. We stayed at a B&B called 
Bassett Wood Farm in the little village of Tissington, where the annual well dressing 
happened to be occuring at the same time. The landscape of Derbyshire was 
gorgeous; I can see why Elizabeth Bennet was so impressed. My highlights were 
visiting the two houses used for Pemberley in the Pride & Prejudice mini-series. I 
even got to see the little pond where Colin Firth's famous wet shirt scene occurs. 


a 
—Ó 





DOWNLOAD: Cary riding a horse for the first time (MOV) ZoeatLyme Park 
Cary and Zoe in Dovedale Valley Zoe at Sudbury Hall 











图 3-1 简单 背景 图 片 的 页 面 ， 疝 未 应 用 任何 CSS3 特效 


3.2 BRA RAHA 


ALE 3-1 中 的 Web 页 面 看 起 来 更 像 一 页 真正 的 纸 , PACE A RICH oe I RR EE HS 
的 ， 必 须要 添加 更 多 的 视觉 细 方 ， 比 如 撕 裂 纹理 或 者 咖啡 残 活 等。 当然 ， 不 使 用 CSS3， 你 也 可 
以 做 好 这 些 细 三 ,但 是 有 了 CSS3 的 帮助 ，HTML 代码 标签 将 会 更 干净 ， 你 也 能 更 轻易 地 实现 这 
些 视 党 效 末 。 现 在 束 来 证 明 一 下 吧 。 


3.2.1 EPIS AM 


如 果 页 面 中 的 文本 能 够 始终 和 纸 质 笔 记 背 景 图 片 的 线 格 保持 一 致 ， 而 不 是 如 图 3-1 所 示 的 那 
PEGE FEC FE EE, 那么 这 个 页 面 的 真实 感 无 疑 能 够 大 大 增强 。 让 我 们 使 用 CSS3 来 改善 这 个 问题 ， 
你 需要 以 用 素 值 (px) 设 定 一 个 基本 的 font-size 和 line-height， 然 后 调整 到 可 以 适 配 这 
个 背景 图 片上 的 线 格 的 行 间 距 。 这 对 大 部 分 用 户 来 说 都 是 没有 问题 的 , 但 是 如 果 有 人 主动 调整 了 
文本 大 小 , 或 者 用 非 标准 的 用 户 设置 覆盖 了 font-size 的 值 , 这 些 文本 马上 就 会 变 得 参差 不 齐 。 
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这 是 因为 文本 可 以 缩放 ,但 是 背景 图 片 却 不 能 。 

但 在 CCS3 5| A background-size 特性 之 后 ,这 已 成 为 历史 。 通 过 使 用 这 一 特性 ， 我 们 可 
以 控制 背景 图 片 在 水 平和 垂直 两 个 方 癌 的 缩放 ,也 可 以 控制 图 乒 拉 伸 履 盖 背 景区 域 的 方式 ， 甚 至 
还 可 以 截取 图 片 。 

1. background-size 是 如 何 工 作 的 

在 我 们 动手 修改 页 面 之 前 , 先 看 几 个 简单 例子 , 以 便于 更 好 地 了 解 background-size 的 工 
作 机 制 。 

3-2 展示 了 一 个 宽 200 像素 高 120 像素 的 图 片 ， 3-3 展示 了 当 在 一 个 宽 500 像素 高 200 
像素 的 div 元 素 里 设置 这 张 图 片 为 正常 的 重复 背景 时 的 表现 ， 由 于 div sc RAB IR 
寸 不 是 正好 是 倍数 ， 所 以 在 右 侧 和 底部 ， 图 片 的 一 些 区 域 会 被 裁剪 而 不 能 显示 。 














Eb d | AND Cana d 
3-2 200x120 像素 的 图 片 3-3” 当 图 片 是 重复 背景 的 时 候 ， 硬 人 出 和 底部 的 部 分 会 被 截 挥 
我 们 可 以 使 用 background-size 属性 缩放 图 片 ， 首 先 将 宽度 从 200 变 成 100, 


div ( 
width: 500px; 
height: 200px; 
border: 1px solid #999; 
background-image: url(images/stars.gif); 
background-size: 100px auto; 

j 


backgroun-size 属性 的 第 一 个 值 100px， 指 定 了 背景 图 片 的 宽度 。 第 二 个 值 auto， 指 定 
TRE. auto 这 个 值 设 定 了 之 后 能 够 让 高 度 自动 地 按照 比例 缩放 。 如 果 你 将 这 个 值 置 空 ， 浏 览 
aa SOU EIA auto。 因 此 如 采 这 样 设 定 background-size: 100px; 也 能 达到 同样 的 效果 。 对 
比 图 3-4 和 图 3-3 就 可 以 看 到 背景 图 片 已 经 被 缩小 了 ， 但 是 保持 了 正确 的 长 宽 比 例 。 











Kod SSE E i- A 
3-4 ARa ARAO 100px 宽 ， 这 样 它 在 宽度 上 正好 适应 div, 
PAA MRA BM 
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如 采 你 在 background-size 的 值 里 面 使 用 百分比 ， 请 注意 这 个 百分比 是 相对 于 div 的 宽 
度 ， 而 不 是 图 片 本 身 的 宽度 ， 比 如 我 想 在 div 里 面 显示 的 背景 图 片 重 复 一 次 ， 但 是 不 会 产生 任 
何 截断 ， 我 会 使 用 如 下 的 CSS: 


div { 
width: 500px; 
height: 200px; 
border: 1px solid #999; 
background-image: url(images/stars.gif); 
background-size: 50% 100%; 








WERTE ox El rs ee TH, WEEZE div 宽度 的 一 半 ， 高 度 则 会 和 div 的 高 度 一 致 ， 然 
后 再 重复 一 次 (图 3-5)。 六 览 避 改 变 了 背景 图 片 的 形状 ， 也 对 它 进 行 了 放大 ， 这 会 让 图 片 的 边 绿 
TUEOKEH ERA UTR. AL Aye: HD bt a HE SLAG, background-size 并 不 适合 所 有 的 
F, RASA AREAS Die. EU hti o HE tel LAI eA ESE RD BO, XXURP ES Fr ae FE 
往 不 太 清 晰 ， 就 好 像 我 们 的 线 格 纸 质 笔记 背景 图 片 一 样 。 








图 3-5 浏览 器 将 图 片 缩放 到 正好 重复 一 次 可 以 填 满 siv， 图 片 变形 了 但 是 没有 被 截断 


更 多 平 铺 背 景 图片 的 方式 

除了 使 用 background-size 让 背景 图 片 正 好 适 配 盒 容 器 以 外 ， 还 可 以 用 Packgrounad- 
repeat 属性 里 面 的 round 和 space 值 来 使 背景 图 片 平 铺 之 后 不 会 在 边缘 上 被 截断 。 这 些 值 
Æ CSS3 新 引入 的 ， 可 以 和 packground-size 联合 使 用 ， 也 可 以 独立 使 用 。 

round 值 会 缩放 背景 图 片 ， 从 而 保证 图 片 填 满 整个 区 域 而 不 会 被 截断 ; space 值 不 会 缩 
放 图 片 ， 但 是 它 可 以 保证 填 满 并 且 弟 一 张 和 最 后 一 张 背景 图 是 紧 靠 容器 边缘 的 。 

不 幸 的 是 ， 在 本 书写 作 之 时 ， 唯 一 能 够 支持 这 些 值 的 浏览 器 是 IE9 和 Opera， 而 有 全 Opera 
的 实现 还 不 尽 完整 并 且 问 题 多 多 。 在 backgroud-repeat 的 这 些 值得 到 很 好 的 支持 之 前 ， 我 
1]if X oe fe HF] background-size 6%, 虽然 它 没有 round 和 space 听 起 来 那么 好 。 


2. 让 纸 质 背景 图 片 的 线 格 和 文本 一 起 缩放 

为 了 让 背景 图 片 和 文本 一 起 缩放 ， 我 们 需要 将 它 的 尺寸 设置 成 既 不 是 百分比 也 不 是 像素 值 ， 
而 是 em, 它 是 一 个 以 当前 的 字体 高 度 为 衡量 基准 的 相对 单位 。 

开始 之 前 ， 先 从 www.stunningess3.com 下 载 练习 文件 ， 然 后 在 你 的 编辑 器 里 打开 paper start. 
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html, 'EHJ CSS 定义 放 在 页 面 头 部 的 style TRE. 
找到 CSS 里 面 对 #page 的 定义 ， 然 后 添加 background-size 属性 ， 把 Mozilla 和 Webkit 
的 私有 定义 也 加 上 去 : 


#paper { 
float: left; 
margin: 40px; 
padding: 3.2em 1.6em 1.6em 1.6em; 
background: url(images/paperlines.gif) #FBFBF9; 
-moz-background-size: auto 1.6em; 
-webkit-background-size: auto 1.6em; 
background-size: auto 1.6em; 


} 


Opera, Chrome, Safari 5, Firefox 4 和正 9 会 使 用 标准 的 background-size 属性 ; Firefox 3.6 
和 Safari 4 及 之 前 的 版 本 会 使 用 -moz- 和 -webkit- 版 本 的 属性 。 在 属性 里 面 ， 我 们 告诉 浏览 器 ， 
锅 望 图 片 的 高 度 是 1 .6em， 然 后 宽度 应 该 是 自 适 应 的 。 这 意味 着 从 弟 一 条 线 开始 ， 这 张 图 片上 的 
所 有 线 格 之 间 的 距离 都 是 1. 6em。 为 什么 是 1.6em 呢 ?” 因 为 每 行文 本 的 行 高 是 1.6, 这 是 在 body 
JU3RÉJ line-height 属性 里 面 已 经 定义 好 了 的 : 
body { 
margin: 0; 
padding: 40px; 
background: #CCC url(images/background.gif); 
color: #333; 
font-size: 87.5%; 
font-family: Georgia, "Times New Roman", Times, serif; 
line-height: 1.6; 
} 
3-6 显示 了 背景 图 片 的 大 小 已 经 发 生 了 改变 ,但 是 文本 还 是 没有 和 背景 图 片 的 线 格 对 齐 。 
这 是 因为 还 没有 将 所 有 文本 的 大 小 和 边 中 都 设置 成 可 以 适 配 1.6em 的 行 高 。 段 落 和 列表 的 文本 
已 经 和 背景 图 片 很 适 配 了 ， 因 为 如 你 在 CSS 里 面 看 到 的 那样 ， 它 们 的 行 高 已 经 是 1.6， 底 边 距 
也 是 1.6em。 但 古 标题 的 值 还 得 调整 一 下 。 





England Trip 2007 England Trip 2007 


In May and Juse 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). lt was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our Vermont 
vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


In May and Juse 2007, Cary and ] spent 15 days traveling around England (plus a very bref detour into Wales). It was our Grat trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our Vermont 
vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & Prejudice. The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & Prejudice. 





You see, | am an unapologetic Janette, and I have a very understanding and loving husband. You see, | am an unapologetic Janette, and I have a very understanding and loving husband. 
Itinerary Itinerary 
The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London on June The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London on June 
3. We rented a car for the entire non-Londoa portion of our trip, so we were able to explore around quite a bit. You can 3. We rented a car for the entire non-Londoa portion of our trip, so we were able to explore around quite a bit. You can 
download the documents Ested below to get an overview of where we went and what we did each day. download the documents Ested below to get an overview of where we went and what we did each day. 
DOWNLOAD: Itinerarv(PDF) Itinerary (Woni) M DOWXLOAD: Itinerary (PDF) Itinerary (Word) Map of tmp locations (PDF) 
JL 1 » aj 
图 3-6 ik J background-size 之 后 的 效果 对 比 


margin: -.3em 0 .14em 0; 
color: #414141; 





84 第 3 章 纸 质 笔记 


font-family: Helvetica, "Helvetica Neue", Arial, 
~ sans-serif; 

font-size: 3.5em; 

font-weight: normal; 


i 
h2 { 
clear: left; 
color: #414141; 
margin: O O -.14em O0; 
font-family: Helvetica, "Helvetica Neue", Arial, 
~ sans-serif; 
font-size: 2.17em; 
font-weight: bold; 
} 





这 些 边 距 的 值 是 经 过 多 次 尝试 才 得 出 来 的 。 不 像 像 素 值 度量 那么 直接 ,你 没 法 找到 一 个 能 够 
在 所 有 训 览 器 上 都 能 显示 得 非常 好 的 值 ， 每 个 浏 览 器 将 相对 值 比 如 em 转换 成 屏幕 上 显示 的 像素 
值 的 计算 方法 都 有 差异 。 这 里 指定 的 值 可 以 在 Firefox, Safari 和 Chrome 上 显示 正常 。 所 有 的 文 
本 都 正常 地 置 于 1.6enm 的 线 格 之 内 (图 3-7). 


England Trip 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our Vermont 
vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & Prejudice. 
You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 


Itinerary 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London on June 
3. We rented a car for the entire non-London portion of our trip, so we were able to explore around quite a bit. You can 
download the documents listed below to get an overview of where we went and what we did each day. 





DOWNLOAD: [Itinerary (PDF) Itinerary (Word) Map oftrip locations (PDF) 


Derbyshire 

We visited Derbyshire on the first three days of our trip. We stayed at a B&B called 
Bassett Wood Farm in the little village of Tissington, where the annual well dressing 
happened to be occuring at the same time. The landscape of Derbyshire was 
gorgeous; I can see why Elizabeth Bennet was so impressed. My highlights were 
visiting the two houses used for Pemberley in the Pride & Prejudice mini-series. I 
even got to see the little pond where Colin Firth's famous wet shirt scene occurs. 


DOWNLOAD: Cary riding a horse for the first time (MOV) Zoe at Lyme Park 
Cary and Zoe in Dovedale Valley Zoe at Sudbury Hall 





Cotswolds 

The next seven days were spent traveling all around the Cotswolds and the 
surrounding area. We stayed at a cottage in the famously picturesque village of 
Bibury. We explored more than a dozen other Cotswolds villages. 





ae SE : 


图 3-7 Firefox 3.6 下 ， 文 本 和 线 格 现在 已 经 很 好 的 对 应 了 
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但 是 在 Opera 上 文本 还 是 没有 对 齐 ， 因 为 Opera 对 背景 图 片 的 调节 度 要 比 其 他 浏览 器 小 。 如 
果 我 们 要 调 市 好 Opera 上 的 表现 ,那么 又 会 导致 其 他 麟 览 妖 不 能 正常 显示 。 这 里 你 必须 决定 哪些 
训 唤 絮 对 你 更 重要 ， 这 通常 基于 网 站 来 访 者 的 统计 。 

当 文 本 和 背景 图 片 适 配 了 之 后 , 如 果 用 户 使 用 了 特殊 的 默认 字体 大 小 或 者 自己 对 文本 的 大 小 
进行 缩放 的 时 候 ， 背 景 图 片 也 会 相应 地 匹配 文本 ， 这 能 够 让 文本 和 线 格 始终 保持 一 致 (图 3-8)。 
同样 地 ， 当 你 改变 了 body 元 素 里 面 的 基本 字体 大 小 时 ， 它 们 同样 也 能 缩放 以 保持 适 配 ， 这 样 你 
A BEZOS A AR IER OS 








England Trip 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour 
into Wales). It was our first trip to Europe. We had very briefly been out of the USA the year before, 
when we jaunted up into Montreal for a few hours during our Vermont vacation, but this was our 
first significant out-of-country trip. We had a fabulous time! 





The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from 
the 1995 mini-series Pride & Prejudice. You see, I am an unapologetic Janeite, and I have a very 


understanding and loving husband. 


Itinerary 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew 
back home from London on June 3. We rented a car for the entire non-London 
portion of our trip, so we were able to explore around quite a bit. You can download 
the documents listed below to get an overview of where we went and what we did each 


day. 





DOWNLOAD: Itinerary (PDF) Itinerary (Word) Map of trip locations (PDF) 


Derbyshire 


We visited Derbyshire on the first three days of our trip. We — 
stayed at a B&B called Bassett Wood Farm in the little b. 


villaga af 'Ticcinaton wrhara tha annnal wall draccinc 
3-8 即使 用 户 使 用 较 大 的 字体 ， 文 本 和 线 格 还 是 能 保持 一 致 
3. 针对 IE 的 兼容 方案 
background-size 属性 在 IE8 及 之 前 的 版 本 上 是 无 法 工作 的 , 而 且 也 很 难 直接 模拟 实现 这 
个 特性 。 但 在 这 个 例子 里 ， 它 只 是 一 个 小 的 视觉 特效 ， 因 此 从 渐进 增强 的 角度 来 说 ,我 们 对 它 在 
IE 下 的 缺失 完全 没有 担心 的 必要 。 
你 也 可 以 通过 Modernizr 为 IE 提供 一 个 备 选 的 样式 ，Modernizr 可 以 检测 到 浏览 器 是 否 支 持 
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background-size。 你 完全 可 以 为 不 支持 的 族 贤 各 提 供 一 个 不 同 的 到 景 图 片 ， 或 者 可 以 提供 一 
个 设计 为 可 以 适 配 特定 像素 值 字体 的 线 格 纸 质 背景 图 片 , 然后 对 不 文 持 background-size KIXI 
览 绒 指 定 字 体 大 小 为 特定 像素 值 。 我 并 不 建议 这 么 做 ， 因 为 从 可 访问 性 的 角度 来 说 ， 基 于 像素 的 
字体 大 小 设置 是 非常 坏 的 做 法 。 然 而 , 当 你 试图 使 用 backgroundq-size 特性 来 缩放 彰 景 图 片 时 ， 
Modernizr 确实 是 提供 备 选 样式 的 不 错 解决 方案 。 








background-size 属性 的 来 龙 去 脉 
background-size 属性 是 背景 和 边框 模块 的 一 部 分 , 参见 www.w3.org/RT/css3-background 。 
它 有 宽度 和 高 度 两 个 值 ， 可 以 设置 成 auto， 也 可 以 是 任何 单位 的 有 具体 值 。 
background-size 可 以 设置 成 容纳 或 者 窗 盖 , 这 两 者 都 可 以 让 浏览 器 按 比 例 缩放 背景 图 
片 。 当 设置 成 容纳 模式 时 ,浏览 器 会 让 背景 图 片 尽 可 能 地 放大 ， 但 是 会 确保 宽 和 高 都 不 会 超 
出 容器 , 这 能 够 保证 图 片 不 会 被 和 截断 , 但 是 可 能 会 导致 容器 的 部 分 背景 区 域 没有 图 片 。 当 设置 
成 复 盖 模式 时 , 浏览 器 会 保证 背景 图 片 的 宽 和 高 都 至 少 不 小 于 容器 对 应 的 宽 和 高 , 这 通常 会 导 
致 图 片 的 截断 ， 但 是 能 保证 容器 的 背景 区 域 被 完整 履 盖 。 
除了 我 们 上 面 提 到 的 例子 ， 你 还 可 以 在 下 面 一 些 场合 使 用 Packground-size。 
口 在 流动 或 者 弹性 布局 中 ， 对 头 部 区 域 的 非 重 复 性 背景 图 片 使 用 这 一 特性 ， 确 保 它 能 始 
HERRER., 
O 对 于 平 铺 的 重复 性 背景 图 片 ， 使 用 这 一 特性 来 确保 背景 图 片 不 会 产生 截断 的 效果 。 
O 制作 一 个 始终 填 满 整个 页 面 的 背景 图 片 ,参见 www.alistapart.com/articles/supersize-that- 
background-please , 
O 在 流动 布局 中 缩放 背景 图 片 来 伪造 出 分 栏 的 效果 ， 参 见 www.css3.info/liquid-faux- 
columns-with-background-size, 
口 使 一 个 链接 或 者 列表 元 素 的 背景 图 标 能 够 和 文本 一 起 缩放 。 
O 针对 iPhone 4 的 高 分 辨认 显示 屏 ， 将 背景 图 片 进行 缩小 一 半 的 显示 预 处 理 ， 这 样 当 这 
块 优 秀 的 显示 屏 以 双 倍 像素 值 显示 时 ， 背 景 图 片 不 会 变 得 模糊 ， 参 见 http://dryan.com/ 
aritcles/posts/20 10/6/25/hi-res-mobile-css-iphone-4 , 
O 使 用 媒体 查询 技术 来 侦 测 用 户 的 窗口 大 小 ， 然 后 据 此 来 缩放 背景 图 片 以 适 配 ， 媒 体 查 
WARS EP OES, 


表 3-1 background-size 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 
支持 ，9+ 支持 ，4+，3.6 需 要 -moz ATH 支持 支持 ，5+，3+ 需 要 -webkit -前 组 。 ”支持 


3.2.2 单一 容器 上 的 复合 背景 图 片 


CSS3 所 市 来 的 让 Web 设计 师 最 开心 的 变化 之 一 就 古 能 够 在 单一 容 顷 上 使 用 复合 的 至 景 图 
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片 。 在 我 们 这 个 例子 里 , 会 使 用 这 一 技术 让 页 面 看 起 来 更 真实 一 一 会 添加 一 些小 细 记 ， 比 如 在 页 
面 顶部 增加 一 个 小 图 条 什么 的 。 

在 CSS3 之 前 , 每 个 容 右 只 能 指定 一 张 背景 图 片 , 因此 每 当 你 需要 增加 一 张 背 景 图 片 的 时 候 ， 
必须 至 少 添加 一 个 容器 来 容纳 它 。 当 然 如 果 你 很 幸运 ，HTML 结构 里 面 恰好 就 有 些 可 用 的 容器 ， 
比如 h3 之 类 的 元 素 通 常会 作为 舱 套 元 素 使 用 ， 你 就 没 必 要 再 添加 额外 多 余 的 容器 了 。 但 是 ， 这 
样 做 是 有 巨大 风险 的 ， 这 意味 着 页 面 的 表现 和 内 容 被 绑 死 了 ， 如 果 内 容 发 生 改变 ,这些 背景 图 片 
该 放 到 哪里 去 呢 ? 

HKE div 容 绒 显示 特定 背景 的 做 法 不 是 很 复杂 ， 但 是 它 明 显 是 难以 管理 的 。 它 让 你 的 
HTML 标记 更 加 复杂 同时 也 会 增加 页 面 文件 的 大 小 。 如 有 果 要 增加 基 个 图 片 效 果 , 你 不 仅 需 要 修改 
CSS， 还 要 修改 HTML 代码 。 

通过 使 用 CSS3, HTML 代码 可 以 保持 不 变 ， 你 只 需要 在 CSS 的 background-image 或 者 
background 属性 中 列 出 需要 使 用 的 所 有 背景 图 片 , 然后 用 逗号 分 开 它 们 ,每 张 图片 都 可 以 定位 ， 
设置 重复 值 ， 改 变 大 小 以 及 其 他 可 以 单独 控制 的 特性 。 

3-9 展示 了 我 们 想 增加 到 页 面 上 的 缘 景 图 片 。 为 了 把 它们 添加 上 去 ， 我 在 #paper 规则 中 
添加 了 一 个 新 的 background 的 声明 : 


#paper ( 

float: left; 

margin: 40px; 

padding: 3.2em 1.6em 1.6em 1.6em; 

background: url (images/paperlines.gif) #FBFBF9; 
background: url(images/thumbtack.png), 
url(images/stainsl.png), 
url(images/stains2.png), 
url(images/stains3.png), 
url(images/stains4.png), 
url(images/paperlines.gif) #FBFBF9; 

-moz-background-size: auto 1.6em; 

-webkit-background-size: auto 1.6em; 

background-size: auto 1.6em; 




















说 明 background 属性 里 的 换行 和 缩 进 是 为 了 方便 阅读 而 设 ， 你 也 可 以 将 它们 写作 一 行 ， 这 
并 不 影响 代码 功能 。 


€ 





3-9 SIMI DSK Hs E A Se FA AS 
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旧 的 background 声明 将 会 继续 被 TE 和 其 他 不 支持 复合 背景 图 片 特效 的 训 览 右 所 使 用 。 因 
为 它们 无 法 理解 新 的 background 声明 中 所 使 用 的 语法 。 而 支持 这 一 特效 的 浏览 器 将 会 使 用 新 
的 声明 来 重 载 旧 的 声明 。 

复合 背景 图 片 也 是 有 层次 地 显示 的 , 最 先 声 明 的 图 片 将 会 居于 最 上 层 , 这 就 是 为 什么 我 要 先 
声明 图 条 的 图 片 ， 而 把 线 格 纸 质 图 片 放 到 最 后 的 原因 。 

光 声 明 对 图 片 的 使 用 还 远 远 不 够 ， 我 们 还 要 分 别 告诉 浏览 器 ， 对 这 些 图 片 ， 应 该 如 何 定位 ， 
如 何 重复 ， 以 及 各 自 的 大 小 如 何 。 要 这 么 做 ， 只 需要 人 简单 地 把 按 吉 号 分 阳 的 定义 当做 单独 的 
Be 定义 来 指定 就 好 。 图 3-10 展示 了 可 以 使 用 在 background 属性 中 的 各 种 值 ， 并 且 

这 些 值 的 先后 顺序 是 有 意义 的 ， 所 以 我 建议 每 次 书写 background 属性 定义 的 时 候 都 按照 这 个 
顺序 ， 以 免 混 请 或 者 出 错 。( 至 少 我 就 常常 弄 错 1 ) 








说 明 图 3-9 所 示 的 水 渍 图 是 用 Obsidian Dawn 所 开发 的 Photoshop 的 笔 刷 绘制 而 成 (www. obsidiandawn. 


com/water-stains-photoshop-gimp-brushes) , 


image position size repeat attachment origin clip 
— | _ | 


| Ld 
background: url(top.gif) 50% 0 / 10px 100px no-repeat fixed padding-box padding-box, 
url(middle.gif) 5096 0 no-repeat content-box, 
url(bottom.gif) 0 0 / auto 20px repeat #FFF; 


color 


图 3-10 background 属性 可 以 包含 复合 层次 ， 顶 层 的 定义 包含 所 有 可 能 的 值 (除了 
color， 它 只 能 在 底层 定义 ) ( 男 见 彩 插图 3-10) 


接 下 来 我 们 按照 图 3-10 所 示 ， 给 我 们 的 例子 增加 背景 图 片 定位 、 重 复方 式 等 : 


background: url(images/thumbtack.png) 50% 5px no-repeat, 














url(images/stainsl.png) 90% -20px no-repeat, 
url(images/stains2.png) 30% 8% no-repeat, 
url (images/stains3.png) 20% 50% no-repeat, 
url(images/stains4.png) 40% 60% no-repeat, 
url(images/paperlines.gif) #FBFBF9; 





接 下 来 , 修改 background-size BEREI at, 除了 最 底层 的 线 格 纸 质 图 片 以 外 ， 其 
他 图 片 都 使 用 它们 原生 的 尺寸 大 小 。 


-moz-background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 
webkit-background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 
background-size: auto, auto, auto, auto, auto, auto 1.6em; 


EZE, E/E 2) RSRJIÉ ze A background Ja Pee SAE c y ba —— BJ. 

虽然 从 理论 上 来 说 ,你 可 以 在 background 属性 里 面 直 接 指 定 background-size We x, 
但 是 这 现在 还 无 法 正常 运行 。 虽 然 Opera, Chrome, Safari 5, Firefox 4 ffl IE 9 都 可 以 直接 接受 
background-size 的 定义 , 但 旧版 的 Firefox 和 Safari 还 是 需要 加 上 浏览 禹 前 级 的 再 明 , 否则 它 
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们 就 拒绝 工作 。 因 此 ,为 了 让 background-size 能 运行 得 更 好 ， 也 为 了 避免 你 自己 把 它 和 
background-position it (这 可 是 非常 容易 犯 的 错误 ) ， 还 是 分 开 定 义 background 和 


background-size 比较 好 。 





保存 好 你 的 代码 ,然后 在 够 新 的 训 览 右 里 面 测 试 页 面 。 你 将 会 看 到 文本 和 至 景 线 格 还 是 保持 
一 致 ， 但 页 面 上 多 了 读 读 的 效果 ， 页 面 的 顶部 也 有 了 图 条 的 特效 ( 见 图 3-11)。 





England Trip 2007 * 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our Vermont 
vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both thoce from her life as well as a few from the 1995 mini-series Pride & Prejodice. 


Itinerary 

The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London on June 
3. We rented a car for the entire non-London portion of our trip, so we were able to explore around quite a bet. You can 
download the documents listed below to get an overview of where we went and what we did each day. 





AD: kinean EDD Itimerary(Word) Mapoftriplocations (POF) 


Day-trips from the Cotswolds 


While staying m Bibury, we took a couple trips out of the Cotswolds proper. 


One day-trip was to Bath to see the Jane Austen sites and, of course, the Roman 
Baths (which are also Jane Austen related, incidentally). On the way back from Bath, d 
we stopped at the village of Lacock, which was used for Meryton is the Pride & 
Prejudice mini-series (along with a buach of other movies). 


Another day-trip took us into Wales to see the ruins of Chepstow Castle. This was 
one of Cary’s highlights during the trip. It was very lange and quite impressive. On 
the way to Wales, we successfully hunted down the private home used for 
Longbourne House in Pride & Prejudice 





DOWNLOAD: TheRoman Baths Cary at Chepstow Castle Zoe at "Longbourne House" 


Winchester and Surrounding Area 


We finally had to say goodbye to our cute cottage in Bibury and moved on to 
Winchester, where we spent two days. On the way, we saw the annual 
Gloucestershire cheese rolling. which was one of our highlights of not only this trip, 
but all the trips I've ever taken. So bizarrely fun. 


You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 
Derbyshire 


We visited Derbyshire on the first three days of our trip. We stayed at a BEB called "S AM 


3-1] div 容 硕 里 面 现在 能 够 显示 全 部 6 种 背景 图 片 的 效 末 了 





说 明 至 此 为 止 的 所 有 修改 都 在 Paper_1.html 页 面 里 , 它 在 你 所 下 载 的 本 章 的 示例 文件 之 中 。 


通过 在 一 个 单一 的 div 容 人 左上 单独 设置 每 张 育 景 图 片 的 定义 ， 而 不 是 把 这 些 图 片 直接 组 合 
成 一 张 育 景 图 片 , 你 可 以 让 这 些 图 片 在 页 面 大 小 发 生变 化 时 有 更 灵活 的 布局 , 不 管 页 面 的 大 小 尺 
寸 古 怎样 的 ， 这 些 污 省 的 图 片 效 末 是 均匀 分 布 的 ， 而 不 是 挤 在 某 个 皇上 。 








复合 背景 图 片 的 来 龙 去 脉 

复合 背景 图 片 并 不 是 一 个 单独 的 属性 , CH background fe background-image 属性 的 
新 特性 。 这 些 属性 是 背景 和 边框 模块 的 一 部 分 ， 参 见 www.w3.org/TR/css3-background, 

£& background 和 background-image 属性 的 定义 中 列 出 每 张 背 景 图 片 的 定义 , 然后 以 
各 号 分 隔 ， 这 些 图 片 是 分 层 展 示 的 ， 最 先 列 出 的 图 片 在 最 上 屋 ， 

每 张 图 片 都 可 以 单独 定位 、 设 置 重 复 模式 以 及 大 小 。 你 可 以 直接 在 background 属性 里 
每 个 图 片 的 URL 定义 的 后 面 直接 加 入 这 些 定义 ， 或 者 单独 用 一 个 过 号 分 陪 的 列表 来 定义 
background 的 各 个 属性 ， 比 如 这 个 例子 ，lbackground-repeat: no-repeat, norepeat, 
repeat-x，repeat。 这 个 过 号 分 隔 的 列表 里 面 的 值 和 background 里 面 定 义 的 图 片 列表 保 
持 一 一 对 应 就 好 。 

除了 我 们 的 例子 ， 你 可 能 在 下 面 一 些 场合 也 会 考虑 使 用 复合 背景 图 片 。 

口 弹性 容器 中 需要 一 些 比较 花 俏 或 者 不 规则 的 边 角 图 片 ， 而 其 他 的 CSS3 特性 比如 

border-radius 又 摘 不 定 的 时 候 ， 比 如 一 个 华丽 的 按钮 ; 参见 http://css-tricks.com/ 


css3-multiple-backgrounds-obsoletes-doors , 
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口 当 使 用 图 片 标记 对 blockquote 标签 的 开始 和 闭合 进行 修饰 的 时 候 。 参 见 http://css. 
dzone.com/news/multiple-backgrounds-oh-what-beautiful-thing , 

OQ 通常 我 们 所 说 的 “视差 效果 ”， 就 是 当 改 变 一 个 窗口 的 大 小 或 者 在 菜 个 div LEH 
时 候 , 希 望 产生 一 些 图 片 能 够 以 不 同 的 速度 相对 移动 的 效果 ;参见 www.paulrhayes.com/ 
2009-04/auto-scrolling-parallax-effect-without-javascript , 

Q 当 某 些 单一 图 片 需要 更 自然 地 拉 伸 以 适 配 整 个 容器 或 者 页 面 的 时 候 ， 你 可 以 考虑 把 单 
一 图 片 先 打 散 成 为 多 张 图 片 ， 然 后 采用 复合 背景 图 片 技 术 ， 比 如 以 一 张 风景 图 片 作为 
背景 ， 但 是 风景 中 的 太阳 始终 显示 在 最 右上 角 ， 而 有 棵 树 始终 保持 在 左下 角 。 

口 当 布 望 把 图 片 均 习 的 分 布 在 容器 里 面 的 时 候 ， 可 以 使 用 按 百 分 比 定位 的 方式 保证 这 些 
图 片 能 够 按 一 定 的 间 孙 分布， 比如 把 蓝 色 背景 和 云 杀 效果 的 背景 图 片 复合 在 一 起 。 

O 网 页 设计 中 最 第 使 用 的 一 种 效果 ， 比 如 顶部 和 底部 的 图 片 固定 ， 但 中 间 部 分 需要 有 不 
断 重 复 的 效果 ， 现 在 我 们 可 以 把 它们 全 部 放 在 一 个 容器 了 。 

O 对 背景 图 片上 应 用 CSS3 渐变 效果 AST, 648 69 background-image 属性 而 
不 是 background-color 属性 来 定义 的 ) ， 可 以 泻 当 出 特定 的 材质 ， 但 是 又 可 以 让 边 
缘 保 持 单一 颜色 ; 或 者 也 可 以 在 用 户 卷 动 页 面 的 时 候 显示 背景 图 片 的 一 部 分 ;参见 
http://atomicrobotdesign.com/blog/htmlcss/make-the-think geek-background-effect-using-css3 , 


3-2 复合 背景 图 片 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


支持 ，9+ 支持 ，3.6+ 支持 ，10.5+ 支持 支持 


针对 IE 的 兼容 方案 
IE 8 及 之 前 的 版 本 ， 还 包括 旧版 本 的 Firefox 和 Opera 都 不 支持 复合 背景 图 片 。 在 我 们 这 个 
HTE, 这 些 图 片 仅仅 起 了 锦上添花 的 效果 ,你 可 以 完全 不 用 考虑 做 什么 兼容 工作 。 使 用 这 些 旧 
式 浏 览 器 的 用 户 还 是 能 看 到 线 格 纸 质 背景 图 片 ， 并 不 会 让 他 们 感觉 缺少 什么 。 
但 是 总 有 些 场合 ， 当 缺少 一 些 图 片 的 时 候 ， 总 体 效果 会 大 打折 扣 或 者 残缺 不 全 。 比 如 当 你 使 
用 复合 背景 图 片 创 作 一 个 按钮 的 时 候 , 设计 好 按钮 由 左 中 布 三 个 图 片 切片 复合 构成 , 但 是 在 这 些 
旧式 浏览 器 里 面 却 仅仅 显示 了 中 间 的 部 分 , 这 个 按钮 会 看 起 来 相当 翡 催 。 请 在 这 样 的 场合 谍 慎 地 
使 用 复合 背景 图 片 技术 ， 因 为 你 可 选 的 兼容 方案 实在 不 多 。 
口 使 用 一 张 可 作为 备 选 的 单一 图 片 。 对 于 这 些 不 支持 的 浏览 器 ， 最 简单 地 方案 就 是 提供 一 
张 单一 的 图 片 。 你 可 以 使 用 Modernizr 来 分 别 定义 不 同 的 浏览 右 ,， 也 可 以 向 单 地 再 重复 定 
义 一 次 background-image 声明 ,然后 把 这 个 声明 置 于 复合 背景 图 片 的 声明 前 面 (我 们 
已 经 在 例子 里 用 了 这 个 方法 了 )。 你 得 确保 这 张 备 选 图 片 确 实 能 正常 工作 。 这 个 方案 确实 
挺 容易 实现 ， 也 不 会 对 支持 复合 背景 图 片 的 浏览 器 造成 什么 问题 。 但 是 相 比 起 复合 背景 
图 片 来 说 ， 它 显然 让 页 面 的 表现 力 大 大 下 降 了 。 
O ARE div 来 显示 复合 背景 图 片 。 相 比 起 上 一 种 方案 来 讲 ， 这 种 方案 更 稳健 ， 但 是 工 
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(ESR REAR AK. 我们 又 回 到 老路 上 去 了 , EAREN div 来 分 别 显示 不 同 的 背景 图 片 。 
如 条 你 想 这 样 做 的 话 ， 必 须 使 用 Modernizr 或 者 TE RER AAMA E ae FAEH iA 
同 的 处 理 。 人 否则 ， 在 支 持 复 合 育 景 图 片 的 训 览 右 里 面 育 景 就 会 重复 显示 。 但 此 时 此 刻 ， 
倒 不 如 完全 不 使 用 复合 背景 图 片 技 术 , RBH aiv EMA AI R ar EARE S LIE. 
因此 我 甚至 都 不 认为 这 算得 上 古 一 个 莱 容 方 委 。 





a 生成 附加 元 素来 显示 附加 的 图 片 。 实 现 “ 舱 套 div” 的 更 干净 的 方法 是 使 用 :before 


和 :after 等 伪 类 来 生成 附加 元 素 ， 然 后 在 其 中 显示 背景 图 片 。Nicolas Gallagher 的 文章 
“CSS2.1 下 的 复合 背景 和 边框 ” 兰 述 了 这 种 方案 (http://nicolasgallagher.com/multiple- 
backgrounds-and-borderswith-css2)。 这 种 方案 在 8 和 Firefox 3.5 上 能 很 好 地 工作 ， 但 是 
IE 6 和 IE 7 并 不 支持 这 些 伪 类 ， 这 又 带 来 了 新 的 兼容 需求 一 一 除非 使 用 脚本 让 这 些 旧 式 
的 训 贤 缉 也 能 支持 这 些 伪 类 。 你 还 得 保证 支持 复合 背景 图 乒 的 训 览 姻 能 够 忽略 这 些 伪 类 
的 定义 。 这 样 我 们 就 把 兼容 方案 搞 得 复杂 无 比 了 ， 你 又 一 次 需要 从 自己 和 用 户 的 角度 出 
发 来 衡量 这 么 做 是 否 值得 。 














O 使 用 canvas。 如 果 你 对 脚本 技术 很 在 行 ， 那 你 可 以 考虑 使 用 HTML5 canvas 标签 ， 在 


3.2.3 


f—v a FA A Ae. SPA IE 8 RZ BiU AB) Eas 3x canvas, 但 用 Google 
的 “explorer-canvas” 的 脚本 就 可 支持 了 (http://code.google.com/p/explorercanvas) , 解释 
如 何 使 用 这 个 脚本 已 经 超出 本 书 的 范围 了 ，Hans Pinckaers 的 mb.js 可 以 帮 有 到 你 ， 它 使 复 
SA EE IE JS IHRgDUEZ LIES LIE (http://github.com/HansPinckaers/mb.js ) 。 





添加 图 片 边框 


男 外 一 个 很 棒 的 视觉 细 市 是 在 页 面 的 左边 增加 一 个 边框 , 让 它 看 起 来 像 古 从 一 本 笔记 本 里 面 
撕 下 来 的 一 页 (图 3-12)。 在 CSS3 中 ， 有 多 种 方法 可 以 实现 这 一 效 采 。 


3-12. HARA ICA BOREAL Fr 


1. 使 用 背景 图 片 

我 们 可 以 把 这 张 图 片 直 接 作为 男 外 一 张 痛 景 图 片 添 加 ， 只 需要 设 管 它 在 垂直 方 同 重复 就 好 。 
但 是 这 张 图 片 有 些 部 分 是 透明 的 〈 你 可 以 看 到 的 那些 类 似 装 订 的 词 )， 因 此 它 下 方 的 图 片 会 有 部 
分 通过 这 些 透 明 的 区 域 透 显 过 来 。 如 采 我 们 的 页 面 的 是 单一 背景 色 而 不 古 图 案 , 就 可 以 在 透明 区 
域 需 充 这 种 单一 痛 景色 ， 让 整个 页 面 的 效 朱 看 起 来 比较 无 颖 。 但 征 显 然 目 前 我 们 的 页 面 无 法 这 


样 做 。 
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当 页 面 不 是 单一 背景 色 的 时 候 ， 你 唯一 的 选择 就 是 在 纸 面 的 aiv 上 包 囊 一 个 div， 然 后 在 
UR div 上 设置 边框 的 背景 图 片 。 你 必须 给 这 个 aiv 足够 的 left-padding 来 保证 内 部 的 div 
` 会 登 加 到 边框 图 片上 去 。 这 可 不 是 理想 的 解决 方案 ， 因 为 需要 增加 额外 的 HTML pric, [EX 
FETA AO Sas Lb ABE WSIS TTA He BF 
TE f Ed Hr RENIE a I) ee BAT YH REA a ERX PA Pr fe RA] OTT « 
它 可 能 正好 在 洞 的 中 间 的 时 候 就 截断 了 ， 而 这 看 起 来 不 太 像 一 页 真正 的 纸 质 笔 记 《〈 图 3-13), R 
承认 这 并 没有 多 严重 一 一 只 是 个 非 第 小 的 问题 而 已 。 但 古 如 琳 用 CSS 能 很 容易 解决 的 话 ， 为 什 
么 不 呢 ? 
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3-13 ”边框 图 片 被 截断 的 效 霖 


CSS3 的 解决 方案 是 把 边框 图 片 的 background-repeat 值 设置 成 为 round (CSS3 新 引入 
的 值 )。 这 会 让 讲 蜗 絮 尽 可 能 地 重复 图 片 以 适 配 容 絮 的 尺寸 ， 当 如 果 没 法 完全 适 配 的 时 候 ， 议 贤 
缕 会 对 图 乒 进 行 一 定 的 缩放 以 避免 产生 底部 截断 这 样 的 状况 。 

NeW, 本 书写 作 之 时 , 只 有 下 9 和 Opera 才 能 支持 round 值 , Opera AI KEIER EE 
KE, background-repeat: round 此 时 还 并 不 是 一 个 真正 可 用 的 解决 方案 。 圣 运 的 是 ， 我 们 
可 以 用 border-image 特性 来 取代 background-image, 

2. 使 用 border-image 

CSS3 能 让 我 们 指定 一 张 图 片 作为 边框 ， 就 像 我 们 之 前 指定 一 个 颜色 值 或 者 一 种 线形 一 样 。 议 | 
帘 强 会 识别 指定 的 这 张 图片 , 然 后 把 它 切 厂 , 在 每 条 边框 上 用 拉 伸 或 者 平 铺 的 方式 来 显示 这 些 切 厂 。 

举例 来 说 ,假设 我 们 想 将 图 3-14 所 示 的 图 片 应 用 为 一 个 aiv 的 边框 ， 使 用 这 张 图 请 的 顶部 
的 30 像素 的 部 分 来 作为 顶部 的 边框 ， 右 边 25 像 双 的 部 分 作为 右边 的 边框 ， 底 部 27 像素 的 部 分 
作为 底部 的 边框 ， 左边 34 像素 的 部 分 作为 左边 框 〈《 图 3-15)。 我 们 需要 同时 指定 边框 切片 的 宽度 
以 及 它们 的 位 置 。 

.Clouds { 

width: 400px; 
height: 150px; 


border-width: 30px 25px 27px 34px; 
border-image: url(clouds.png) 30 25 27 34 stretch; 


说 明 ART VAR SLATE ER fe E33] 92 ECOLE AE. 20] 95 28 AR AS A OW v RAAT He 
放 以 适应 与 之 对 应 的 边框 澳 度 。 
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3-14. 该 图 片 的 边框 是 无 规律 的 ， 因 此 可 以 用 bordqer-image 来 拉 伸 并 平 铺 








34px 
30px 
27px 
25px 
图 3-15 ”线条 表示 了 我 们 将 如 何 对 该 图 片 进行 “虚拟 ”切割 ， 以 便 我 们 在 边框 中 将 其 


拉 伸 并 平 铺 
border-image {HIN iba xe Ed Hr HER S, XF CSS 中 其 他 的 路 径 值 是 一 样 的 。 
接 下 来 的 1 到 多 个 数字 部 分 就 是 定义 训 览 右 应 该 如 何 对 图 片 进行 切片 。 在 我 们 的 例子 里 , 我 
们 使 用 了 4 个 数字 ， 因 为 希望 指定 4 个 角 上 的 数值 都 各 有 不 同 。 第 一 个 数 ，30， 是 对 顶部 的 边框 
图 片 切片 位 移 的 指定 ， 单 位 是 像素 。 第 二 个 数 ，25, 是 对 右边 的 边框 切片 位 移 的 指定 ， 第 三 个 数 
是 对 底部 的 指定 ,第 四 个 数 是 对 左边 的 指定 。 浏 览 器 会 根据 这 个 定义 对 图 片 进行 切片 ， 然 后 产生 
九 张 图 片 ， 分别 对 应 4 条 了 边 ，4 个 角 和 容 絮 的 中 央 部 分 。 





说 明 奇怪 的 是 ， 在 border-image 的 切割 值 中 你 不 能 带 上 px 单位 。 或 者 你 可 以 使 用 相对 于 图 片 
本 身 的 百分数 来 作为 切割 值 ， 但 这 一 次 必须 带 上 百 分 号 。 


m mH 

边框 图 片 的 中 央 切 片 会 覆盖 整个 容器 的 中 间 区 域 , 就 是 整个 边框 区 域 所 和 包 衷 的 部 分 。 虽 然 
不 太 直 观 , 但 是 确实 提供 了 更 多 的 样式 选项 。 如 果 你 不 布 望 这 个 中 央 切 片 履 盖 了 你 的 背景 图 片 
或 者 背景 颜色 ,那么 在 制作 边框 图 片 的 时 候 , 请 让 它 的 中 则 部 分 保持 透明 ， 人 然后 将 图 片 保 存 成 
为 透明 的 GIF 或 者 PNG, 

其 实在 规范 定义 中 ， 中 央 切 片 默 认 会 被 无 视 ， 除 非 你 在 border-image 的 定义 里 面 加 上 
fill 关键 字 。 但 是 ， 当 前 没有 浏览 器 支持 fill 关键 字 ， 它 们 默认 就 给 你 fill, PARRA 
A 


border-image 属性 的 来 龙 去 脉 
border-image 属性 是 背景 和 边框 模块 的 一 部 分 ， 和 参见 www.w3.org/TR/css3-background , 
它 是 一 个 速写 属性 ， 但 是 现在 你 还 不 可 以 使 用 各 个 独立 的 属性 ， 因 为 还 没有 任何 浏览 器 支持 
border-image Z ?|&x 3, 
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在 border-image 的 值 里 面 ， 你 需要 指定 一 张 图 片 ， 以 及 对 图 片 进行 切片 的 方式 和 各 个 
切片 (除了 4 个 角 ) 的 重复 的 方式 。 

如 果 你 不 需要 分 别 对 4 个 边框 都 做 特别 的 设 定 的 话 , 可 以 用 1 个 数值 应 用 到 所 有 4 个 边框 。 
如 果 只 指定 1 个 值 ， 那么 这 个 值 将 会 应 用 到 4 个 边框 上 ; 如 果 指 定 了 2 个 值 ， 那么 第 1 个 值 会 
应 用 到 底部 和 顶部 ,第 2 个 值 会 应 用 到 左边 和 右边 ; 如 果 指 定 了 3 个 值 ， 那么 第 1 个 会 应 用 到 
顶部 ， 第 2 个 会 应 用 到 左边 和 右边 ， 第 3 个 会 应 用 到 底部 ; 如 果 指 定 了 4 个 值 ， 那 就 是 从 项 
部 开始 ， 按 顺 时 针 方 向 分 别 应 用 到 4 个 边框 。 图 3-15 展示 了 浏览 器 切片 的 万 式 。 

repeat E VAik É X stretch, repeat, round A, space, Jw AH 1 4s repeat 
值 ， 那 么 会 应 用 到 所 有 4 个 边框 ; 如 果 指 定 了 2 个 值 ， 那 么 第 个 值 会 应 用 到 底部 和 顶部 ， 第 
2 个 会 应 用 到 左边 和 右边 。 这 个 值 如 果 指 定 为 fepeat， 那 么 它 会 导致 所 有 4 条 边 ， 包 括 中 央 
的 切片 都 会 平 铺 ; 如 果 是 stretch， 则 会 把 切片 拉 伸 以 填 满 所 有 区 域 ; round 会 平 铺 缩放 好 
的 切片 来 保证 切片 正好 铺 满 整个 区 域 ; space 则 会 让 切片 在 整个 区 域 里 面 均匀 地 分 布 。 

请 记 住 ，border-width 的 值 总 是 要 伴随 border-image 一 起 设置 ， 这 样 才 能 留 出 足够 
的 边框 空间 来 显示 图 片 。 其 实 规范 里 面 还 有 个 border-image-wigdth 的 属性 , 但 是 目前 还 没 
有 任何 浏览 器 可 以 支持 ， 同 样 也 没有 浏览 器 支持 border-image-outset, 

不 幸 的 是 ，border-image 与 通过 border-radius 产生 的 曲线 边框 兼容 性 不 好 ， 

除了 我 们 的 例子 ， 你 可 能 还 会 把 border-image 应 用 于 以 下 一 些 场合 。 

O 按钮 参见 http:/ejohn.org/blog/border-image-in-firefox , 

口 渐变 背景 。 

口 锯 次 状 的 边缘 ， 比 如 邮票 或 者 彩票 。 

口 用 图 片 边框 效果 创建 一 个 相框 或 者 证 书 框 之 类 ; 参见 www.norabrowndesign.com/css- 
experiments/border-image-frame.html , 
曲线 或 者 有 角度 的 边框 。 
O 曲线 或 者 有 角度 的 阴影 (box-shadow 只 能 实现 一 般 的 阴影 效果 ， 但 是 你 可 以 创建 一 

张 不 规则 的 阴影 图 片 然后 应 用 到 border-image 上 )。 


D 


表 3-3 ”border-image 属 性 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 
不 支持 部 分 支持 ， 需 要 -moz- 部 分 支持 ，10.5+ 部 分 支持 ， 需 要 -webkit- 部 分 支持 
前 经，3.5+ 前 级 





repeat 值 对 于 浏览 如 具 体 是 如 何 实 现 边 框图 片 的 效果 起 到 了 至 关 重 要 的 作用 。 在 这 个 例子 
E, 我 们 使 用 了 stretch É, 这 将 会 导致 浏览 器 把 4 个 边框 上 的 切片 都 拉 伸 来 填 满 整个 区 域 (图 
3-16)， 包 括 中 央 切 片 (但 不 包括 4 个 角 )。 你 也 可 以 将 它 设置 成 repeat (图 3-17), 或 者 round 
(图 3-18), 或 者 space, (round 值 现在 只 有 Firefox 和 Opera 支持 。) FAIRY AD bt as oed 
space， 因 此 我 连 个 效 采 图 都 没 法 截取 。 





2:2 
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3à 





图 3-16 stretch AK 





3-17 repeat 效果 





3-18 round 效果 


3. 应 用 撕 纸 边缘 图 片 
我 们 开始 在 页 面 中 使 用 lborder-image 来 应 用 撕 纸 边缘 图 片 作 为 边框 ,以 便 在 文章 内 容 div 
上 产生 如 图 3-12 所 示 的 效果 。 因 为 仅仅 想 把 图 片 效 琳 应 用 到 左边 框 ， 所 以 我 们 指定 左边 框 为 50 
像素 宽 一 一 那 正好 是 图 片 的 宽度 一 一 然后 把 其 他 边框 的 宽度 设置 成 0: 
#paper { 
float: left; 
margin: 40px; 


padding: 3.2em 1.6em 1.6em 1.6em; 
border-width: 0 0 0 50px; 








background: url(images/paperlines.gif) #FBFBF9; 

background: url(images/thumbtack.png) 50% 5px no-repeat, 
url(images/stainsl.png) 90% -20px no-repeat, 
url(images/stains2.png) 30% 8% no-repeat, 
url (images/stains3.png) 20$ 50% no-repeat, 
url (images/stains4.png) 40$ 60% no-repeat, 
url (images/paperlines.gif) #FBFBF9; 

-moz-background-size: auto, auto, auto, auto, auto, 
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auto 1.6em; 
-webkit-background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 
background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 


边框 图 片 的 实践 

border-image 属性 其 实 是 有 点 令 人 混 清 的 一 一 我 不 否认 这 一 点 。 如果 在 整个 的 例子 练习 

完成 之 后 你 还 是 有 些 不 确定 的 话 ， 我 强烈 的 推荐 下 面 这 些 跟 边框 图 片 相关 的 Web 工具。 

口 Kevin Decker 4 “border-image-generator” ” (http://border-image.com/) 能 让 你 上 传 任意 
图 片 然 后 展示 它 应 用 为 边框 图 片 的 效果 。 你 可 以 改变 切片 的 位 移 ， 边 框 的 宽度 以 及 切 
片 重复 的 方式 ， 然 后 马上 观察 这 些 改变 所 产生 的 效果 。 

口 Nora Brown 的 “Grokking CSS3 border-image” (www.norabrowndesign.com/css-experi- 
ments/border-image-anim.html) 使 用 5 个 预先 设置 好 的 图 片 ， 然 后 提供 你 一 些 预 设 的 
border-image 值 来 观察 相应 的 效果 。 

改变 这 些 参 数值 , 然后 即时 的 观看 所 产生 的 视觉 效果 的 改变 , 这 无 疑 是 详细 了 解 这 段 CSS 

规则 工作 原理 的 最 佳 方式 。 


接 下 来 ,我 们 将 针对 Chrome 和 Opera 使 用 标准 的 border-image 属性 来 应 用 边框 图 片 ， 同 
时 对 Firefox 和 Safari 使 用 带 有 浏览 器 前 级 的 属性 : 


#paper ( 
float: left; 
margin: 40px; 
padding: 3.2em 1.6em 1.6em 1.6em; 
border-width: 0 0 0 50px; 
-moz-border-image: url(images/edge.png) 0 0 0 50 round; 
-webkit-border-image: url(images/edge.png) 0 0 0 50 
3 round; 
border-image: url(images/edge.png) 0 0 0 50 round; 











background: url(images/paperlines.gif) #FBFBF9; 

background: url(images/thumbtack.png) 50% 5px no-repeat, 
url(images/stainsl.png) 90% -20px no-repeat, 
url (images/stains2.png) 30% 8% no-repeat, 
url (images/stains3.png) 20% 50% no-repeat, 
url (images/stains4.png) 40% 60% no-repeat, 
url(images/paperlines.gif) #FBFBF9; 

-moz-background-size: auto, auto, auto, auto, auto, 





auto 1.6em; 
-webkit-background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 
background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 
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片 ， 只 需要 从 左边 切片 50 像素 ， 所 以 实际 上 整个 50 像素 宽 的 图 片 都 用 于 左边 框 。 

对 于 repeat 值 ， 我 们 使 用 round 来 保证 图 片 能 够 重复 但 是 也 会 缩放 以 保证 某 个 润 不 会 被 截 
断 一 半 。Safari 和 Chrome 不 能 支持 round 值 ， 它 们 会 使 用 疝 可 接受 的 repeat 值 来 作为 备 选 。 

4. 使 用 background-clip 来 定位 图 片 

我 们 的 边缘 图 片 现在 在 div 的 左 侧 已 经 重复 显示 出 来 了 ， 但 是 背景 图 片 却 显示 在 它 的 下 层 
(Al 3-19)。 这 是 因为 ,边框 是 默认 绘制 在 背景 区 域 的 上 层 的 。 你 可 能 从 来 没有 注意 到 这 个 细 证 ， 
因为 通 稼 你 的 边框 都 是 实心 线 ， 不 会 有 透明 的 部 分 ， 但 是 如 采 你 把 border-style 设置 成 
dashed， 就 会 明白 我 的 意思 。 边 框图 片 同样 也 是 绘制 在 背景 区 域 的 上 层 的 。 





et ONE PU E 





In May and June 2007, Cary and I spent 15 dz 
trip to Europe. We had very briefly been out c 
during our Vermont vacation, but this was ou: 





The trip was heavily focused around Jane Au: 


& Prejudice. You see, I am an unapologetic Ja 


Itinerary 


The trip began on May 19, 2007, when we fles 
London on June 3. We rented a car for the ent 
around quite a bit. You can download the doc: 
what we did each day. 


DOWNLOAD: [tinerarv(PDF) Itinerarv( 


Derbyshire 


We visited Derbyshire on the first three days : 


图 3-19 ”边框 图 片 琶 加 在 背景 图 片 之 上 








background 属性 的 顺序 


通常 来 说 ,在 每 条 规则 里 面 书 写 属 性 的 顺序 是 没有 相关 性 的 , 那 只 是 我 们 经 第 使 用 的 标准 
顺序 而 已 ， 你 可 以 按照 自己 的 意愿 来 随意 安排 这 些 顺 序 。 但 是 ， 对 于 background-clip 属性 来 
说 ， 则 必须 确保 它 在 backgroung 这 个 速写 属性 的 后 面 ， 因 为 background-clip 属性 是 可 以 直 
接 作 为 一 个 值 书写 在 background 属性 里 面 的 (参见 图 3-10) , de JR 42b 5 5 T background-clip 
属性 之 后 ， 然 后 书写 了 background 属性 ， 但 是 没有 在 其 中 提供 background-clip 的 信 
息 ， 实 际 上 是 在 告诉 浏览 器 你 希望 使 用 border-box 的 默认 值 ， 这 会 重 载 你 之 前 所 设 定 的 
background-clip 的 值 ， 

为 何不 直接 把 background-clip 的 值 直 接 写 在 background 里 面 呢 ? 我 们 现在 还 不 能 
这 样 做 ， 正 如 不 能 把 background-size 的 值 写 进来 一 样 : 有 些 浏览 器 需要 带 上 前 级 的 值 ， 
无 论 它 在 自身 还 是 属性 简写 中 都 还 不 理解 这 个 标准 属性 
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background-clip 属性 的 来 龙 去 脉 
background-clip 属性 是 背景 和 边框 模块 的 一 部 分 ,参见 www.w3.org/TR/css3-background , 
它 控制 了 有 具体 在 容器 的 哪些 部 分 绘制 背景 。 
目前 这 个 属性 可 以 接受 的 值 有 border-box (这 是 默认 值 ， 在 边框 之 下 绘制 背景 ) ， 
padding-box (背景 延伸 到 padding 的 外 边缘 ， 但 是 不 会 超出 边框 的 范围 ) YA 
content-box (背景 仅 在 内 容 区 绘制 ， 不 会 超出 padding 和 边框 的 范围 ) Firefox 3.6 及 之 前 
的 版 本 不 支持 content-box, # H.4& | border 和 padding 作为 值 ， 而 不 是 border-box 
和 padding-box; Firefox 4 没有 这 些 问题 。Safari 5 能够 在 标准 属性 中 支持 border-box 和 
ee 
Webkit 还 支持 一 个 特殊 值 text， 但 是 在 -webkit- 前 级 的 属性 里 ， 这 个 值 可 以 让 文本 作 
为 背景 的 人 让 曾 ， 不 在 文本 背后 的 背景 则 不 可 见 。 这 个 特性 非常 酷 ， 但 是 可 能 没 机 会 加 入 标准 。 
如 果 想 获取 更 多 信息 或 者 更 多 例子 ， KIL Wwww.css3.info/webkit-introduces-background-cliptext, 
http://trentwalton.com/2010/03/24/css3-background-clip-text, 和 http://trentwalton.com/2010/04/06/ 
css3-background-clip-font-face , 
除了 把 背景 从 边框 下 移出 以 外 ， 你 可 能 在 以 下 一 些 场合 也 会 需要 background-clip, 
口 Adashed 或 者 dotted 的 边框 下 移出 背景 色 或 者 背景 图 片 。 
O 创作 一 种 双边 框 的 表现 ， 一 个 是 真正 的 边框 ， 另 外 一 个 实际 上 是 padding, 这 可 以 通 
过 使 用 content-box 值 来 实现 。 
口 通过 使 用 padqaqing-pox， 保 证 背景 色 不 会 溢出 到 圆 角 边框 之 外 ， 这 情形 第 第 发 生 在 
Webkit 核心 的 浏览 器 上 ; 参见 http://tumble.sneak.co.nz/post/928998513/fixing-the- 
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background-bleed , 
表 3-4 ”复合 背景 图 片 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 
支持 ， 9+ 支持 ， 4+; 部 分 ， Dt 支持 支持 ， 335. 需要 -webkit- 支持 
需要 -moz- 前 绥 前 级 ， 部 分 ，5+ 


对 和 运 的 是 ， 我 们 能 够 使 用 CSS3 改变 这 个 默认 表现 。CSS3 使 用 background-clip 属性 帮 
助 你 控制 背景 和 边框 之 间 的 相对 人 位置。 默认 值 是 border-box,， 这 就 是 我 们 常见 的 ， 背景 可 以 一 


直 延 伸 到 边框 之 下 的 情况 。 如 有 果 将 background-clip 设置 成 为 padding-box， 就 会 让 背景 
伸 到 padding 区 为 止 ， 不 会 超出 到 边框 之 下 : 


#paper { 
float: left; 
margin: 40px; 
padding: 3.2em 1.6em 1.6em 1.6em; 
border-width: 0 0 0 50px; 
-moz-border-image: url(images/edge.png) 0 0 0 50 round; 
-webkit-border-image: url(images/edge.png) 0 0 0 50 
- round; 


iE 
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border-image: url(images/edge.png) 0 0 0 50 round; 
background: url(images/paperlines.gif) #FBFBF9; 
background: url(images/thumbtack.png) 50% 5px no-repeat, 
rl(images/stainsl.png) 90$ -20px no-repeat, 
url(images/stains2.png) 30% 8% no-repeat, 
rl(images/stains3.png) 20% 50% no-repeat, 
rl(images/stains4.png) 40$ 60% no-repeat, 
rl(images/paperlines.gif) #FBFBF9; 
-moz-background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 
-webkit-background-size: auto, auto, auto, auto, auto, 
auto 1.6em; 











background-size: auto, auto, auto, auto, auto, 

auto 1.6em; 
-moz-background-clip: padding; 
-webkit-background-clip: padding-box; 
background-clip: padding-box; 





Chrome, Safari 5, Firefox 4 和 Opera 都 使 用 标准 属性 ， 但 是 Firefox 3.6 及 之 前 的 版 本 以 及 
Safari 4 及 之 前 的 版 本 会 使 用 前 级 版 本 的 属性 。 需要 注意 的 一 点 是 -moz-background-clip 属性 
会 使 用 padding 而 不 是 标准 的 padding-box 的 值 。 

这 个 变更 使 得 背景 图 片 从 边框 图 片 的 下 方 移 走 了 (LE 3-20), 








England Trip 


In May and June 2007, Cary and I spent 15 da: 
to Europe. We had very briefly been out of the 
Vermont vacation, but this was our first signifi 


The trip was heavily focused around Jane Aust 
Prejudice. You see, I am an unapologetic Janei 


Itinerary 


The trip began on May 19, 2007, when we flew 
on June 3. We rented a car for the entire non-L 
quite a bit. You can download the documents li 
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DOWNLOAD: [tinerary (PDF) Itinerary (\ 
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3-20 IVAN f background-clip 之 后 的 效果 


5. 针对 其 他 浏览 器 的 兼容 方案 
不 支持 border-image 的 浏览 器 根本 就 不 知道 究 况 发生 了 什么 ， 它 们 还 是 只 能 显示 正常 的 
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BARA A ae AA. AR red 58 ERA OR, RREZEN, SERES FEU 
—/ UM LE div， 然 后 在 那 之 上 应 用 背景 图 片 。 

如 末 你 真 这 么 做 ， 有 两 个 选择 ， 一 是 在 所 有 六 贤 带 上 都 完全 移 除 border-image AUR, — 
是 对 支持 border-image 的 训 览 侣 隐 茂 兼容 的 背景 图 片 。 我 喜欢 第 二 种 方式 ， 因 为 它 更 灵活 ， 
但 又 不 需要 特别 多 的 额外 工作 。 只 需要 简单 地 运用 Modernizr 或 者 下 条 件 注 释 创建 一 个 只 有 特定 
Ul Gas A AEP LE div 就 好 。 如 下 是 这 个 div 需要 的 CSS 定义 : 

Hwrapper { 


padding-left: 50px; 
background: url(images/edge.png) repeat-y; 








} 
其 他 浏览 器 不 会 知道 这 条 规则 的 存在 ， 它 们 的 HTML 代码 里 面 自然 还 是 会 存在 这 个 多 余 的 
BR div， 但 是 不 会 有 任何 CSS 应 用 到 它 之 上 。 
还 有 一 种 可 选 方 案 是 你 可 以 把 线 格 纸 质 背景 图 片 和 撕 纸 边 绿 图 片 合并 成 一 张 至 景 图 片 。 那样 
的 话 就 无 需 增加 一 个 额外 的 包 于 div, 但 是 会 带 来 更 大 的 工作 强度 ,因为 要 为 不 同 的 剖 览 三 制作 
不 同 的 图 片 。 你 还 是 得 确保 支持 的 浏览 货 会 使 用 两 张 图 片 ， 一 张 用 于 background, 一 张 用 于 
border-image, 
存在 儿 种 方法 可 以 用 脚本 的 方式 来 模拟 border-image, ix FEMA AB (t2l Foe Al A 
式 。 但 是 脚本 的 方式 只 支持 以 stretch 的 方式 来 显示 border-image， 不 能 是 repeat 也 不 能 
是 round， 所 以 脚本 的 方式 并 不 适用 于 我 们 的 例子 。 但 如 果 你 的 项 目 只 需要 stretch 方式 的 
border-image 的 话 ， 请 参见 如 下 解决 方案 。 
口 Jason Johnston 的 PIE (http://ccs3pie.com) , 在 第 2 章 里 有 描述 。PIE 还 包括 对 border-image 
M IE 6 8| IE 8 系列 的 有 限 支 持 。 
口 Louis-Remi Babe 的 borderImage ( http://github.com/Irbabe/borderimage ) 。 这 是 个 模拟 
border-image FJ jQuery fiit: XF F IE Dil bias , CEH VML, XF FAE IE DU 5s , EEF canvas, 
在 这 里 你 可 以 找到 更 多 关于 如 何 使 用 的 详细 描述 Www. Irbabe.com/sdoms/borderlmage, 


3.2.4 添加 阴影 

在 第 2 章 中 ， 我 们 介绍 了 使 用 box-shadow 属性 来 为 容 右 创建 阴影 效果 。 纸 质 笔记 页 看 起 来 
是 应 用 这 个 效果 的 绝 佳 例子 ,那么 我 们 来 演 试 添加 一 下 。 但 是 请 当心 这 一 点 : 阴影 效果 和 参差 不 齐 
的 边框 图 片 无 法 配合 , 它 只 能 和 整个 容器 平滑 的 边 适 配 。 这 就 意味 着 如 果 阴 影 效 果 应 用 在 我 们 例子 
的 左边 ， 你 只 会 得 到 一 个 直 边 的 阴影 (图 3-21) ， 而 不 会 有 完美 适 配 撕 裂 的 纸 质 边缘 的 阴影 效果 。 
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3-21 阴影 效 末 过 到 毛 糙 的 边 绿 的 时 候 的 效 采 
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为 了 避免 这 个 问题 ， 在 我 们 的 例子 里 面 ， 需 要 将 阴影 设置 得 离 左 边 足 够 还 。 为 +paper 增加 
如 下 规则 : 


-moz-box-shadow: 6px 5px 3px hsla(0,0$,0$,.2); 
-webkit-box-shadow: 6px 5px 3px hsla(0,0%,0%,.2); 
box-shadow: 6px 5px 3px hsla(0,0$,0$,.2); 


说 明 至 此 为 止 的 所 有 修改 都 在 paper_2.html 页 面 里 , 它 在 你 所 下 载 的 本 章 的 示例 文件 之 中 。 


这 将 会 在 右 下 的 边 绿 创建 阴影 效 打 (JILE 3-22), 
© 
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The Jane Austen fun wasn't done yet though! We saw her writing desk and 
some of her writings at the British Library, and in the Naitonal Portrait 
Gallery we saw the only known portrait of her. 





Our last full day in England, June 2, was our wedding anniversary. We had a lovely dinner at a Turkish restaurant called Ev, sitting 
outon their lovely plant-decked patio on a mild summer evening. 





DOWNLOAD: Parliamentand Big Ben Zoein St. James Gardens Cary in Trafalgar Square (MOV) 





图 3-22 ”阴影 效 采 


由 于 Safari 和 Chrome 并 不 支持 使 用 round 作为 border-image BJ repeat 值 ， 那 就 有 可 
能 在 这 些 浏 览 姻 上 正好 有 对 撕 裂 效果 截断 一 半 的 情况 ， 这 会 让 阴影 效果 看 起 米 有 点 奇怪 OLA 
3-23)。 这 个 问题 并 不 大 ， 但 是 如 有 果 它 让 你 很 纠结 ， 请 移 除 -webkit-pox-shadqow 的 声明 好 了 。 
(有 时 如 果 每 个 浏览 絮 都 有 自己 独特 的 声明 的 话 ， 世 界 反 而 会 变 得 美好 ， 是 不 是 ?) 
im 
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图 3-23” 当 发 生 截 断 时 的 奇怪 效果 


当然 ， 现 在 Webkit 核心 的 浏览 历 上 已 经 人 设 有 阴影 效 有 末了， 为 了 实现 阴影 歼 末 而 又 不 使 用 
-webkit-box-shadow 属性 的 话 ， 你 可 以 创建 一 张 阴 影 图 片 ， 然 后 使 用 -webkit-border- 
image 属性 把 图 片 添 加 到 右 侧 和 底部 。 


3.3 BERATEN 


我 们 已 经 在 文章 的 背景 上 玩 了 很 多 花样 了 。 现 在 让 我 们 对 实际 的 内 容 添 加 一 些 额外 的 样式 。 
可 以 使 用 efont-face 规则 来 让 标题 看 起 来 像 定 手写 的 ， 这 个 戏法 在 了 下 上 也 能 玩 。 
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3.3.1 @font-face 是 什么 





efont-face 是 链接 服务 袁 上 的 字体 的 一 种 方式 〈 就 像 你 指定 图 片 链接 一 样 ) ， 训 览 右 会 根 
据 这 条 指令 把 对 应 的 字体 文件 下 载 到 本 地 缓存 , 使 用 它 去 修饰 文本 。 这 通常 被 称 为 字体 嵌入 ( 吕 
然 实 际 上 并 没有 什么 字体 被 舱 入 了 )， 这 些 “ 租 入 ”的 字体 束 是 Web 字体 。 

这 条 规则 实际 上 是 1998 年 所 制定 的 CSS 2 的 一 部 分 , 但 是 在 CSS 2.1 里 面 它 被 移 除 了 , 现在 
在 CSS3 里 面 它 叉 回来 了 ， 并 且 最 终 获 得 了 广泛 的 浏览 器 支持 。 

直到 现在 为 止 ， 如 果 疫 有 Web 字体，Web 设计 师 对 字体 的 使 用 还 局 限于 一 个 可 能 在 所 有 的 
用 户 机 器 上 都 会 存在 的 小 的 字体 集合 ， 它 们 被 称 为 Web 安全 字体 。 设 计 师 如 果 不 满 足 于 仅仅 使 
用 Arial, Verdana 或 者 Georgia (或 者 其 他 少数 ) 字体 的 话 ， 它 们 将 只 能 依赖 图 片 、Flash 或 者 脚 
本 技术 才能 够 使 用 其 他 特定 的 字体 .所 有 这 些 模拟 技术 都 会 对 网 站 的 可 访问 性 和 可 用 性 造成 很 大 
的 问题 。 从 实现 和 维护 的 角度 来 说 , 它们 也 有 很 大 的 工作 强度 , 某 种 程度 上 也 会 降低 页 面 的 性 能 。 

相反 地 ， 如 有 条 使 用 efont-face， 将 不 会 对 页 面 上 真实 的 内 容 文字 造成 任何 影响 。 你 不 需要 
关心 用 户 是 否 安装 了 Flash 插件 或 者 是 否 开局 了 JavaScript。 不 需要 创建 任何 图 片 或 者 脚本 ,用 户 
也 无 需 下 载 它 们 。 你 的 工作 简单 到 只 需要 编写 类 似 如 下 的 CSS 规则 : 


@font-face { 
font-family: Raleway; 
src: url(fonts/raleway thin.otf); 























j 

hi Y 
font-family: Raleway, "HelveticaNeueLt Std Thin", 
~ "Helvetica Neue Light", "HelveticaNeue-Light", 
-~ "Helvetica Neue", Helvetica, Arial, sans-serif; 

j 


这 告诉 训 览 右 使 用 raleway thin.otf 字体 文件 来 泻 染 hl 标签 内 的 字体 (图 3-24)。 如 采用 
户 的 六 览 如 不 支持 6&font-face, 或 者 因为 茶 些 原因 没有 办 法 下 载 字 体 文件 。 讲 览 如 的 兼容 工作 简 
单 到 只 需要 从 字体 栈 查 找 下 一 个 可 选 字 体 来 使 用 。 字体 栈 就 是 在 font-family 属性 中 声明 的 字体 
列表 , 剂 览 器 会 按照 声明 的 顺序 尝试 从 用 户 的 机 器 上 加 载 这 些 字体 ,直到 找到 一 个 可 用 的 字体 为 止 。 


~ — M — - 
mo /全 /全 | 一 Y» 一 一、 (C /一 、( 一 

"am e" | | So 二 一 一 L— —. 
YA «J a 2 ~ J = A P A M wd L. i 


- MARK TWAIN 
3-24 使 用 efont-face 显示 非 标准 字体 
也 许 你 有 点 将 信 将 疑 ,正如 你 所 想 , 在 实际 工作 中 使 用 afont-face 远 比 上 面 所 说 要 复 灯 许多 。 
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说 明 欲 了 解 如 何 制 作 或 找到 字体 栈 和 其 他 资源 ， 请 参阅 http://nicewebtype.com/notes/2009/04/ 
23/css-font-stacks , 


3.3.2 选择 可 用 字体 


最 重要 的 问题 之 一 就 是 并 不 是 所 有 的 字体 都 可 以 在 Web 页 面 中 使 用 ， 其 中 有 一 些 有 非常 严 
格 的 版 权限 制 禁止 这 样 的 使 用 ， 而 另外 有 一 些 则 在 Web 上 看 起 来 不 太美 观 。 

1. 版 权 问题 

每 次 想 使 用 一 个 字体 文件 的 时 候 , 都 要 了 解 一 下 它 的 授权 文件 (通常 称 为 最 终 用 户 许 可 协议 
(EULA) 或 者 使 用 条 款 ), 看 看 它 是 否 允 许 作 为 Web EBEN V 许多 字体 授权 都 不 允许 这 样 做 。 
因为 当 你 使 用 efont-face 的 时 候 ， 字体 文件 会 被 下 载 到 用 户 的 本 地 缓存 ， 就 好 像 图 片 一 样 。 用 
户 可 以 到 本 地 缓存 目录 中 去 复制 字体 并 自行 安装 使 用 。 大 部 分 的 字体 提供 者 可 并 不 乐意 那些 访问 
过 你 的 Web 站 点 的 人 都 可 以 随意 地 使 用 字体 。 














说 明 有 此 方法 可 以 使 你 制作 的 字体 文件 更 安全 。 请 参阅 http://subjectiveobject.com/2009/10/28/ 
securing-font-face 和 http://typefront.com/ , 


当然 ， 设 几 个 用 户 真 的 会 去 那么 做 。 但 是 Richard Fink 在 他 的 文章 “十 字 路 口 的 Web TH” 
(www.alistapart.com/articles/fonts-at-the-crossing) 中 描述 了 字体 开发 者 对 Web TRIERA BFL 
更 大 问题 : 

最 大 的 担心 来 自 于 一 旦 字体 可 以 从 Web 上 了 访问， 他 们 也 将 变 成 字体 销售 的 一 种 形 

式 ， 当 前 的 商业 模式 会 被 打破 ， 而 且 通 常 来 说 这 也 会 导致 字体 的 贬值 。 字 体 设 计 者 再 也 

没 办 法 像 这 样 和 客户 开价 了 : 4 种 样式 的 字体 , 供 6~10 人 使 用 ,总 价格 是 420 块 钱 。 现 

在 字体 已 经 在 网 站 上 了 ， 理论 上 任何 用 户 都 可 以 不 花 一 分 钱 去 使 用 。 如 果 Web 仅仅 是 

让 最 终 用 户 从 中 收益 但 是 对 生产 者 却 没有 任何 帮助 ， 想 想 这 行 得 通 吗 ? 

更 不 蔷 的 是 ， 书 写 大 多 数字 体 的 授权 协议 时 ， 大 家 对 efont-face BAMA, MUA Rise 
这 些 授权 协议 的 时 候 , 将 看 不 到 任何 关于 岁入 字体 的 内 容 。 限制 的 缺失 并 不 意味 着 你 就 可 以 目 由 
使 用 这 些 字 体 。 除 非 协 议 明确 表明 Web 各 入 或 者 再 发 行 字 体 是 合法 的 ， 你 才 可 以 这 么 做 。 











说 了 明 http://webfonts.info/wiki/index.php?title=web fonts licensing _ overview 是 一 份 有 关 哪 些 厂 商 
的 字体 可 以 被 说 入 及 其 痊 换 方法 的 总 览 性 文章 ， 尽 管 如 此 你 在 使 用 前 仍旧 需要 确认 每 一 
个 字体 的 TRL o 


其 至 对 于 免费 字体 来 说 , 也 是 这 样 。 因 为 你 能 够 免费 獒 得 字体 并 使 用 并 不 代表 你 能 够 将 它 再 
次 改行。 电脑 上 已 经 安 效 的 字体 亦 征 如 此 。 
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好 消 朋 是 有 很 多 地 方 可 以 找到 允许 Web 和 能 入 的 字体 。 

口 The League of Moveable Type (www.theleagueofmoveabletype.com) 是 一 个 成 长 中 的 小 型 
组 织 , 专门 收集 可 以 提供 efont-face 使 用 的 免费 或 开源 的 字体 。 图 3-24 所 使 用 的 Raleway 
字体 就 是 来 目 这 个 组 织 的 收集 。 

口 Webfonts.info 的 维基 有 一 个 页 面 称 为 “可 供 @font-face RAHI” (http://webfonts.info/ 
wiki/index.php?title=Fonts available for %40font-face embedding), ， 上 面 列 出 了 一 些 人 允许 
和 岁入 的 字体 ， 大 部 分 都 是 免费 的 。 但 是 跟 很 多 的 维基 页 面 类 似 ， 它 的 更 新 总 是 不 及 时 的 ， 
APA Fe i EH ANAS 

O Font Squirrel (www.fontsquirrel.com) 提供 了 大 量 的 免费 字体 ， 这 些 字 体 的 授权 都 是 允许 
租 入 的 。 它 还 提供 了 一 些小 工具 来 辅助 使 用 efont-face， 和 后 我 们 会 介绍 一 下 。 

O Google 有 一 个 允许 众 入 的 免费 字体 库 ， 名 为 Google Font Directory (http://code.google. 
com/webfonts ) 。 当 你 通过 Google 字体 API 直接 链接 这 些 字 体 的 时 候 , 你 使 用 的 是 Google 
服务 器 上 存放 的 字体 ， 这 种 方式 有 大 量 的 优点 (参见 : http://mindgarden.de/benefit-of- 
thegoogle-font-api) 。 但 是 你 也 可 以 从 http://code.google.com/ p/googlefontdirectory/source/ 
browse Ede PE HSOCTESII EL CLBUHR AS 28 E. 

O Kernest (www.kernest.com) 上 的 字体 大 部 分 是 免费 的 ， 全 部 字体 都 允许 对 入 。 有 些 字体 
直接 通过 Kernest 网 站 就 可 以 使 用 ， 但 大 部 分 都 可 以 下 载 到 自己 的 服务 器 上 。 

QO exljbris (www.josbuivenga.demon.nl) 和 Fontfabric (http://fontfabric.com) 都 提供 一 些 可 
HERA Web 的 字体 。 根 据 EULA 授权 你 可 以 任意 地 使 用 。 

口 Fonthead (www.fonthead.com) 上 的 所 有 字体 都 允许 通过 efont-face 进行 Web IA, 

QO FontSpring (www.fontspring.com/fontface) 出 售 可 供 传统 、 印 刷 用 途 的 字体 ， 也 包括 供 
@font-face 使 用 的 Web 字体 。 

口 FontShop 创作 了 一 些 字 体 的 Web 版 本 ， 称 为 Web FontFonts (www.fontshop.com/fontlist/ 
n/web_fontfonts)， 你 可 以 单独 购买 这 个 版 本 而 不 需要 为 传统 版 本 付费 。 





说 明 这 里 所 列举 的 资源 很 可 能 发 生变 化 和 增长 。 欲 获取 最 新 的 Web 字体 资源 列表 ， 请 访问 


www.stunningcss3.com/resources 。 


避重就轻 
我 所 列 出 来 的 所 有 Qfont-face-reedy 字体 ， 你 都 可 以 下 载 并 放 到 自己 的 服务 器 上 ， 然 
后 对 它们 进行 编码 以 提供 服务 。 但 是 还 有 一 个 选项 是 让 别人 来 干 这 些 重 活 累 活 ， 你 只 需要 使 用 
他 们 提供 的 字体 吝 入 服务 ， 也 称 为 字体 分 发 服务 ， 或 者 叫 字 体 混 消 与 伺服 服务 (FHOS), 
这 些 服 务 提 供 一 系列 的 字体 的 分 发 ， 这 些 都 是 授权 许可 了 可 供 Web 使 用 的 ， 这 很 好 地 避 
免 了 efont-face 的 版 权 问 题 ,字体 都 由 这 些 服务 的 主机 伺服 , 让 下 载 和 再 发 行 字 体 变 得 困难 
其 至 不 可 能 。 
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字体 嵌入 服务 非常 容易 使 用 , 因为 他 们 为 不 同 的 浏览 器 提供 了 所 有 必需 的 文件 格式 , 包括 
你 把 字体 添加 到 浏览 器 所 需要 的 代码 ,除了 CSS 之 外 ,他 们 可 能 还 提供 JavaScript 以 便 让 字体 
不 能 再 重用 ,或 者 加 快 字 体 演 数 的 速度 。 这 些 服 务 大 都 不 是 免费 的 , 虽然 有 些 服务 的 有 些 内 容 
可 以 免费 ,他 们 的 定价 策略 也 是 很 多 样 化 的 , 例如 可 以 订购 一 个 字体 的 组 合 ， 或 者 单独 为 一 种 
字体 在 一 个 网 站 上 的 应 用 付费 。 

这 些 服务 现在 非常 流行 

AREA T. 

Q Typekit (http://typekit.com) 是 一 家 订购 型 的 字体 服务 机 构 ， 你 可 以 为 你 需要 的 字体 集 
按 年 付费 ， 这 些 字体 是 来 自 不 同 厂商 的 产品 。 有 一 个 最 基本 的 字体 集合 是 免费 的 ， 但 
是 有 其 他 的 用 户 限制 。 

口 Fontdeck (http://fontdeck.com) 是 一 家 订购 型 的 字体 服务 机 构 ， 但 付费 方式 是 按照 每 个 
网 站 一 年 为 每 个 字体 单独 付费 ， 而 不 是 为 一 个 字体 集合 付 年 费 。 它 的 字体 也 来 自 多 家 

口 Kernest (www.kernest.com) 的 字体 订购 模式 和 Fontdeck 的 非常 相似 ,但 是 它 的 字体 差 
不 多 都 是 免费 的 。 它 也 拥有 多 家 厂商 的 产品 。Kernest 为 一 些 字 体 提 供 了 伺服 服务 ， 
它 的 大 部 分 字体 都 可 以 下 载 下 来 自己 伺服 。 

口 Acender 提供 两 种 服务 : Web 字体 服务 (www.ascenderfonts.com/webfonts) 以 及 FontsLive 
(www.fontslive.com) 。 这 两 种 服务 都 拥有 多 家 厂商 的 产品 ， 并 且 订 购 模 式 和 Fontdeck 
比较 类 似 。 

口 WebINK (www.extensis.com/en/WebINK) 有 和 Typekit 比较 类 似 的 订购 模式 ， 但 它 是 
按 月 付费 的 ， 并 且 除 了 字体 的 本 身价 格 之 外 ， 你 还 得 为 使 用 的 带宽 付费 。 字 体 也 集合 
了 多 家 厂商 。 

口 Webtype (www.webtype.com) 拥有 和 Fontdeck 相似 的 订购 模式 ,但 是 价格 主要 是 基于 
你 所 使 用 的 宽带 。 它 同样 集合 了 多 家 厂商 的 产品 ， 你 还 可 以 另行 购买 传统 版 本 的 字体 
用 来 下 载 并 应 用 到 桌面 系统 。 

Q Typotheque (www.typotheque.com/webfonts) 只 提供 它 自己 制作 的 字体 产品 ， 而 且 每 种 
字体 你 只 需要 付 一 次 费用 。 

口 Just Another Foundry (http://justanotherfoundry.com/webfonts) 也 只 提供 自己 制作 的 字体 
产品 ， 但 是 它 是 按 年 付费 的 订购 模式 。 

口 Fonts.com Web Fonts (http://webfonts.fonts.com/) 有 着 和 Typekit 类 似 的 订购 模式 ， 
但 是 是 按 月 付费 的 。 最 高 价格 的 套餐 是 允许 你 下 载 字 体 并 应 用 到 本 地 桌面 的 。 但 是 只 
有 在 他 们 服务 的 网 站 上 。 

如 果 你 想 要 考虑 使 用 以 上 任何 一 家 的 服务 ,请 先 读 一 下 这 篇 文章 “十 字 路 口 的 Web 字体 ” 

( www.alistapart.com/articles/fonts-at-the-crossing) 最 后 给 出 的 购买 建议 列表 。 如 果 你 想 获 得 最 
新 的 字体 髓 入 服务 商人 信息， 请 来 这 里 www.stunningcss3.com/resources, 





许多 字体 生产 商 仅仅 为 自己 创作 的 字体 提供 服务 





fe An, 
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2. 可 读 性 和 泻 染 问题 

当 你 扫除 了 版 权 障碍 之 后 ， 先 不 要 太 过 于 兴奋 , 现在 还 不 是 马上 在 页 面 中 使 用 各 种 奇形怪状 
的 字体 的 时 候 。 每 次 当 你 使 用 一 种 Web 字体 的 时 候 ， 都 要 有 一 个 明确 的 需要 使 用 它 的 原因 ， 而 
不 是 仅仅 因为 它 看 起 来 很 酷 。 一 定 要 确保 字体 的 使 用 确实 增 踢 了 文本 内 容 的 可 读 性 。 

你 需要 使 用 实际 的 文本 内 容 来 测试 Web 字体 是 否 工 作 正 稍 。 图 3-24 中 所 使 用 的 Raleway F 
体 对 于 大 标题 来 说 非常 适用 ， 但 是 对 于 正文 来 说 ， 它 太 细 了 ， 当 使 用 在 正文 中 时 ， 设 法 很 好 地 六 
染 ， 可 读 性 也 会 降低 。 大 部 分 商业 字体 的 设计 导致 了 它们 在 屏幕 上 设法 以 较 小 的 形式 呈现 。 因 此 
在 很 多 情形 下 ， 最 好 只 将 efont-face 所 引入 的 字体 用 于 标题 ， 对 于 正文 还 是 继续 使 用 Web 安 
全 字体 比如 Georgia 或 者 Lucida 等 。 











提示 名 为 Soma FontFriend 的 小 书签 (http://somadesign.ca/projects/fontfriend) 可 以 让 你 便捷 地 
测试 字体 栈 里 的 字体 ， 和 它 同样 支持 Web 字体 ， 这 样 你 就 能 直观 地 了 解 每 个 字体 在 你 的 页 
面 表现 如 何 了 。 





使 用 Web 字体 所 需要 注意 的 另外 一 个 方面 是 这 些 字体 的 抗 饥 元 和 精 调 方式 会 影响 到 它们 的 
可 辨认 性 。Web 字体 在 使 用 了 抗 锯齿 的 情况 下 往往 比 传统 字体 的 边 绿 更 粗粮, 通 第 这 是 因为 它们 
并 不 征 为 在 屏 医 上 显示 而 设计 的 。 高 质量 的 字体 ， 跟 专门 为 Web 设计 的 字体 一 样 ， 会 有 更 好 的 
精 调 设置 ， 简 单 来 说 ， 就 是 字体 文件 中 的 一 组 定义 细则 ， 旨 在 优化 字体 边缘 使 得 它们 在 电脑 屏幕 
的 像素 网 格 上 显示 时 更 加 平 销 ， 从 而 对 人 有 眼 的 视觉 效 朱 会 更 好 。 字 体格 式 的 作用 也 走 这 样 : 
TrueType ECAJ FRIM% Eb OpenType CFF 字体 有 更 好 的 精 调 。 饥 谓 的 程度 不 仅仅 只 与 字体 文件 
本 吴 相 关 ， 它 和 操作 系统 甚至 训 览 右 都 有 很 大 关系 : Mac 通 弟 部 比 Windows Pir, BELSH 
微 模糊 一 点 。Windows XP 的 用 户 如 末 没 有 开启 ClearType 的 话 ,字体 效 来 简直 不 堪 入 目 。ClearType 
古 微 软 公司 推出 的 提高 屏 秦 上 文本 演 染 效 才 的 技术 。 

除了 Web 字体 的 可 读 性 非常 重要 以 外 ， 字 体 栈 里 面 的 备 选 字体 的 可 读 性 也 非常 重要 。 请 确 
保 测 试 当 Web 字体 不 可 用 时 ， 用 户 还 是 可 以 看 到 可 读 的 、 有 吸引 力 的 字体 。 通 第 你 应 该 选择 和 
你 的 Web 字体 比较 类 似 的 Web 安全 字体 来 作为 备 选 。 这 样 的 话 ， 不 管 最 终 用 户 看 到 的 是 什么 字 
体 ， 你 应 用 到 字体 上 的 大 小 、 粗 细 以 及 其 他 样式 设置 都 能 够 很 好 地 工作 。 

















说 明 你 可 以 使 用 font-size-adjust 属性 来 强制 不 同 尺 寸 的 字体 统一 大 小 ， 但 目前 只 有 
Firefox 支持 该 属性 。 谷 获取 更 多 信息 , 请 参阅 http://webdesignernotebook.com/css/the-little- 
known-font-size-adjust-css3-property 以 及 文 末 的 链接 。 


多 关于 精 调 和 抗 锯 齿 的 细 市 
字体 精 调和 抗 锯齿 是 一 个 远 远 超越 本 书 范围 的 技术 问题 ,如果 你 想 了 解 更 多 的 话 , 可 以 看 
PEG A, 
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口 Thomas Giannattasio 的 “字体 抗 锯 此 的 烦恼 ” ( www.smashingmagazine.com/2009/11/02/ 
the-ails-of-typographic-anti-aliasing) 介绍 了 抗 锯 齿 、 精 调 、 子 像素 洽 染 的 相关 内 容 ， 以 
及 不 同 的 操作 系统 和 浏览 器 是 如 何 处 理 Web FIRE R H., 

口 Richard Fink 的 “字体 设计 专家 眼中 的 字体 精 调 ”( http://readableweb.com/font-hinting- 
explained-by-a-font-designmaster) 以 及 Peter Bil’ak 的 “字体 精 调 ” (www.typotheque. 
com/articles/hinting) 对 于 学 体 精 调 的 工作 方式 提供 了 更 多 的 细节 。 

口 Joel Spolsky 的 “字体 平滑 、 反 锯 次 及 子 像素 洽 染 ”( www.joelonsoftware.com/items/ 
2007/06/12.html) 比较 了 革 果 和 微软 对 于 平滑 屏幕 文本 的 不 同方 式 。 

口 Thomas Phinney 的 “浏览 器 选项 与 字体 洽 染 ”( www.thomasphinney.com/2009/12/ 
browser-choice-vs-font-rendering) 解释 了 浏览 器 对 文本 的 洽 染 和 操作 系统 之 间 的 关系 。 

口 Webkit 内 核 的 浏览 器 能 够 让 你 通过 对 -webkit-font-smoothing 属性 的 设置 来 控制 
抗 钥 次 的 模式 。Tim Van Damme 的 “-webkit-font-smoothing” (http://maxvoltar.com/ 
archive/-webkit-font-smoothing) 以 及 Dmitry Fadeyev 的 “字体 平 消 ”( www.usabilitypost. 
com/2010/08/26/font-smoothing) 都 对 此 有 所 讨论 。 





的 是 ，Web 71K ee 前 发 展 。 比 如 IE 9 使 用 微软 DirectWrite API 来 
文字 , 使 Web 字体 看 起 来 非常 , 同样 地 , 越 来 越 多 的 字体 供应 商 也 正在 贩 售 Web 
a. Ra @ @font-face 的 流行 ， 将 看 到 更 多 面向 Web 的 付费 字体 的 出 现 ， 


-H jp He 
党 D 


Always do right. This will gratify some people, and astonish the rest. 


Always do right. This will gratify some people, and astonish the rest. 





Always do right. This will gratify some people, and astonish the rest. 


3-25 ”中间 的 Arial 和 底部 的 Calibri 字体 都 太 细 小 了 ， 不 能 作为 Web 字体 Junction 
的 首选 替代 方案 


Always do right. This will gratify some people, and astonish the rest. 


Always do right. This will gratify some people, and astonish the rest. 


Always do right. This will gratify some people, and astonish the rest. 





3-26 Trebuchet MS 和 Lucida Sans Unicode 都 可 以 作为 Junction 的 备 选 方案 








O 该 文 已 收录 于 人 民 邮 电 出 版 社 出 版 的 《软件 随想 录 : 程序 员 部 落 萌 长 Joel 谈 软件 》 一 书 中 。 一 一 编者 注 
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3.3.3 浏览 器 文 持 度 


当 你 选择 了 有 正确 的 授权 协议 的 字体 , 并 且 能 够 在 屏幕 上 平 请 地 显示 之 后 , 那 接 下 来 的 工作 
就 是 使 用 @font-face 规则 来 链接 这 个 字体 文件 并 使 用 ,对 吗 ? 还 役 这 么 和 催 单 。efont-face 在 
各 种 训 览 左上 都 得 到 了 很 好 的 支持 ， 但 是 不 同 的 训 览 套 会 要 求 你 使 用 不 同 的 字体 文件 类 型 。 

TrueType (TTF) FH OpenType (OTF) 字体 文件 ， 跟 那些 早已 经 存在 于 你 的 电脑 上 的 文件 一 
样 ， 在 绝 大 多 数 广 览 奏 上 都 能 够 正 浓 工作 。 

下 训 览 属 从 第 4 版 的 时 候 就 开始 文 持 efont-face 了 ,但 是 从 I 正 4 到 IE 8 都 要 求 你 使 用 特 
殊 的 字体 文件 格式 , eT TER ZUR ASK OpenType (EOT), EOT 实际 上 不 属于 一 种 字体 文件 格式 ， 
它 是 使 用 数字 版 权 管 理 (DRM) 协议 压缩 TTF 字体 之 后 生成 的 一 个 备份 ， 主 要 用 来 保护 字体 不 
GR HH. 

唯一 能 够 在 iOS 的 Safari( 就 是 iPhone, iPod Touch 和 iPad 上 所 使 用 的 浏览 器 ,也 叫做 "Mobile 
Safari”) 上 正常 工作 的 字体 文件 格式 是 SVG 〈 可 缩放 矢量 图 形 )。SVG 在 Chrome, wi Safari 
以 及 Opera 上 也 能 正常 工作 ， 但 在 Firefox 上 不 行 。 你 可 能 对 于 SVG 作为 矢量 图 片 格式 的 角色 非 
TAR, H SVG 文件 同样 能 够 包含 字体 信息 一 一 实际 上 ， 每 个 字体 的 元 素 确 实 都 是 由 矢量 绘 
制 而 成 的 。 











说 明 和 谷 获取 更 多 关于 SVG 字体 的 信息 ， 请 参阅 Divya Manian 的 “About Fonts in SVG" — x 
(http://nimbupani.com/about-fonts-in-svg.html) 。 


使 用 这 三 种 格式 一 一 TTF 或 者 OTF,EOT 以 及 SVG 一 一 基本 上 能 够 让 所 有 支持 efont-face 
的 训 览 右 正 常 地 显示 你 需要 的 特定 字体 ， 但 是 为 了 癌 后 兼容 ， 你 也 应 该 了 解 一 下 第 四 种 格式 ， 
WOFF, 


说 明 你 可 以 从 www.w3.org/fonts/woff-fAQ 获得 更 多 关于 WOFF 的 信息 。 


WOFF 是 在 2009 年 引入 的 , 它 的 含义 是 Web 开放 字体 格式 。 跟 EOT 类 似 ，WOFF 从 技术 上 
来 说 并 不 是 一 种 字体 格式 ， 它 是 TTF 或 者 OTF 格式 的 压缩 封装 。 跟 EOT 不 同 ，WOFF 并 不 包含 
DRM。 到 现在 为 止 ， 支 持 WOFF 格式 的 浏览 器 只 有 Firefox 3.6 及 其 之 后 的 版 本 、Chrome 6 和 
IE 9,， 但 是 主流 鹿 贤 如 都 在 添加 对 它 的 支持 ， 很 多 字体 厂商 也 开始 提供 这 种 格式 。WOFF 规范 在 
2010 年 7 月 成 为 了 W3C 的 工作 草案 ,因此 可 以 说 它 得 到 了 官方 的 支持 ， 有 望 成 为 标准 的 Web 字 
体格 式 。 也 许 在 未 来 ， 它 是 唯一 的 格 却 。 


说 明 EOT fe WOFF 文件 使 用 无 损 压 缩 。 这 些 字体 与 其 TIF A OTF 格式 的 源 文件 效果 一 样 。 
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BY BALEARES AN o, ae tia tt AN Ak T, 在 下 一 市 我 们 就 会 了 解 到 , 创建 你 所 需要 的 所 有 格式 
是 非常 简单 的 。 表 3-5 是 训 览 俩 对 字体 格式 支持 的 一 个 总 结 。 


说 明 它 的 浏览 器 支持 度 是 CSS 中 变化 较 快 的 部 分 。 请 参阅 http://webfonts.info/wiki/index.php? 


title=%40font-face browser support 和 www. mund. com/resources 获取 最 新 信息 。 


表 3-5 efont-face 文 件 类 型 的 浏览 器 支持 度 


WOFF OTF TTF SVG EOT 

IE 9 不 文 持 9 DMEF 4 

Firefox 3.6 3.5 3.5 不 支持 不 支持 
Opera 不 支持 10 10 10 不 支持 
Opera Mobile 不 支持 9.7 9.7 9.7 不 支持 
Safari 不 支持 3.1 3.1 3.1 不 支持 
Chrome 6 4 4 0.3 不 支持 
Safari on 10S 不 文 持 WAFF 不 文 持 31 NEF 





*Chrome 3 文 持 OTF 以 及 ITTF 字 体 ， 但 不 是 默认 文 持 你 必须 执行 一 个 命令 行 命令 才 可 以 。 表 格 中 列 出 的 阐 览 右 
版 本 征 指 这 个 训 览 右 最 早 开始 支持 的 版 本 ， 所 以 这 个 版 本 之 后 肯定 是 支持 的 。 


3.3.4 字体 格式 转换 


有 一 些 字 体 的 提供 商会 提供 给 你 所 有 不 同 麟 览 颖 所 需要 的 不 同 的 字体 格式 。 举 例 来 说 ，Font 
Squirrel 提供 了 一 个 称 为 “@font-face 字体 集 ” 的 东西 ， 里 面包 含 了 字体 的 原始 TIF 和 OTF 格 
XX, BA SVG 版 本 、WOFEF 版 本 以 及 EOT 版 本 ， 然 后 还 有 一 个 简单 的 HTML 页 面 以 及 样式 表 ， 
示 江 你 应 该 在 CSS 里 面 添 加 哪些 efont-face 规 则 。 可 以 在 这 里 下 载 这 个 字体 集 www.fontsquirrel.- 
com/fontface 。 

更 厉害 的 是 Font Squirrel 的 afont-face 字体 集 生 成 器 (www.fontsquirrel.com/fontface/ 
generator) 。 你 可 以 上 传 你 的 字体 ， 并 且 生 成 需要 的 任何 格式 。 你 也 能 控制 它 输 出 的 CSS 语法 ， 
通过 减少 一 些 内 容 来 减 小 文件 大 小 ， 然 后 使 用 更 多 的 选项 调 优 字体 ( 见 图 3-27), 

Font Squirrel 所 生成 的 文件 通 妆 就 是 你 全 部 所 需 ， 但 是 还 有 一 些 值 得 一 提 的 工具 可 以 优化 你 
的 EOT 和 SVG 字体 文件 。EOTFAST 是 一 蒜 免 费 的 果 面 软件 (在 http://eotfast.com/ 下 载 )， 它 
以 将 TTF 文件 转换 成 为 无 损 压 缩 的 EOT 文件 ，Font Squirrel 所 生成 的 EOT 文件 是 未 压缩 时 。 命 
ATLE ttf2svg (http://xmlgraphics.apache.org/batik/tools/font-converter.html) 可 以 将 TTF 文件 转 
换 成 SVG 文件 ， 转 换 之 后 文件 大 小 保持 不 变 ， 其 宇 有 可 能 更 小 ; 你 必须 安放 Java 以 及 Java SVG 
工具 套件 。 
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3-27 Font Squirrel 的 efont-face 字体 集 生 成 大 


3.3.5 ”使 用 @font-face 


现在 让 我 们 正式 使 用 efont -face。 既 然 要 打造 纸 质 笔记 效 末 ， 那 么 手写 字体 上 朋 定 是 必 不 可 
少 的 。 我 为 标题 文本 选择 了 Prelude， 一 个 比较 随意 的 手写 字体 〈 见 图 3-28)。 我 们 不 会 对 正文 也 
使 用 这 种 字体 ， 因 为 在 一 个 很 小 的 太 寸 的 时 候 这 种 字体 会 变 得 很 难看 而 且 可 读 性 很 差 。 
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PRELUDE 


4 Styles | TrueType | More Casady & Greene Fonts | Visit Site 
C3 @font-face Compatible! 


Specimens Test Drive Character Map License @font-face Kit 





PreludeFLF Regular v England Trip 2007 | 60 ~ 





England Trip 2007 


Download Prelude in TrueType format: 


Prelude Family (All 4 styles) 


Prelude LP Regular Aa DC Mee M MA De DUM m IN Do Dg n ST 


PreludeFLF Regular | 232 Glyphs 


Pede IT Medaim -移入 Mel ble o p Aho m eo 


PreludeFLF Medium Italic | 232 Glyphs 


PreludePLF Bold AabbC DALEY GGHANI fi KRLIMmNnOoFo.QgRrSsTtu 


PreludeFLF Bold | 232 Glyphs 


Belk ITI Gold AN Ha SA Do M mn Mo Syke 


PreludeFLF Bold Italic | 232 Glyphs 





3-28 Font Squirrel 网 站 上 的 Prelude 字体 


在 本 章 的 练习 文件 里 面 ， 你 会 发 现 一 个 名 为 “fonts” 的 文件 夹 ， 里 面包 含 了 我 们 的 页 面 需 
的 所 有 8 个 版 本 的 Prelude 字体 文件 : EOT, SVG, TTF, WOFF, 各 自 都 同时 有 正常 和 粗 体 两 种 。 
我 使 用 Font Squirrel 的 生成 工具 创建 了 这 些 版 本， 使 用 了 图 3-27 中 所 示 的 设置 。 我 还 使 用 
EOTFAST 重新 制作 了 EOT 格式 ， 这 将 它 的 大 小 几乎 缩小 了 一 半 。 

1. 使 用 efont - £ace 规则 来 链接 文件 

你 可 能 会 注意 到 图 3-27 中 Font Squirrel 的 生成 天 对 于 CSS 格式 总 共有 3 个 选项 ， 分 别 对 应 
@font-face 的 三 种 CSS 语法 格式 。 在 CSS 代码 中 ，@font-face 的 多 种 语法 格式 都 有 着 同样 
的 效果 ， 所 有 这 三 种 语法 都 是 合法 且 合 平 标准 的 CSS, AAAA R r PEBRE i LIE. 

这 三 种 语法 的 原理 过 于 复杂 ， 所 以 这 里 就 不 解释 了 , 但 是 这 确实 也 不 太 重 要 。 三 种 中 任意 一 
种 都 能 满足 我 们 的 目的 ,所 以 选择 哪 一 种 真 的 只 和 个 人 喜好 有 关 。 我 选择 的 是 "Bulletproof Smiley” 
版 本 。 


说 明 如 果 你 想 知 道 更 多 细节 ， 请 点 击 Font Squirrel Generator 里 每 个 CSS 格式 名 下 方 的 蓝 色 链 
接 来 阅读 相关 的 三 篇 文章 。 
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下 面 就 是 Prelude 字体 的 Bulletproof Smiley 语法 : 


@font-face { 
font-family: 'Prelude'; 
src: urli('ronbs/preluderlr-webronb.eotc')s 
eros logal('Q'), 
url('fonts/preludeflf-webfont.woff') format('woff'), 
url('fonts/preludeflf-webfont.ttf') 
3format('truetype'), 
url('fonts/preludeflf-webfont.svgitwebfont') 
~ format ('svg'); 
} 
@font-face { 
font-family: 'Prelude'; 
sre: url('fonts/preludeflf-bold-webfont.eot'); 
sro: local('Q'), 
url('fonts/preludeflf-bold-webfont.woff') 
~ format ('woff'), 
url ('fonts/preludeflf-bold-webfont.ttf') 
~ format('truetype'), 
url ('fonts/preludeflf-bold-webfont.svg#webfont ' ) 
~ format ('svg'); 
font-weight: bold; 














】 

请 将 这 段 语 法 置 于 所 有 CSS 规则 之 前 ， 其 实 放 在 任何 位 置 ， 它 都 能 正常 工作 ， 但 是 接 下 来 
你 会 了 解 到 ， 将 它 置 于 你 的 样式 之 前 的 话 ， 会 如 何 提 高 页 面 的 性 能 。 你 可 以 直接 在 练习 文件 的 
paper_final.html 中 复制 和 粘贴 这 段 代 码 。 

这 两 段 efont-face 规则 通过 声明 同样 的 font-family 名 字 ，Prelude， 将 正常 和 粗 体 两 种 
字体 组 合成 一 个 字体 族 。 每 个 afont-face 规则 都 给 出 了 字体 文件 的 路 任 ,， 并 且 还 有 一 些 样 式 和 
Here (Eben font-weight: bold Fl font-style: italic), 


说 明 在 Paul Irish 的 原创 文章 (http://paulirish.com/2009/bulletproof-font-face-implementation-syntax ) 
中 细 述 了 这 些 语 法 的 关键 细节 。 这 些 知识 不 必 掌 握 ， 但 如 果 你 和 我 一 样 是 个 Web KE, 
我 想 你 会 对 它 很 感 兴趣 。 


我 们 先 看 看 第 一 段 efont-face 声明 ， 然 后 一 行 行 地 读 下 来 。 

规则 的 第 一 部 分 一 一 font-family: 'prelude' ;一 一 给 你 链 入 的 字体 定义 了 一 个 名 字 ， 这 
样 之 后 你 可 以 在 字体 定义 的 字体 栈 里 面 声 明 对 它 的 引用 。 你 可 以 随意 命名 ,， 它 仅仅 是 对 整个 字体 
信息 的 一 个 简单 引用 。 

规则 的 第 二 部 分 src: Url('fonts/preludqef1f-webfont .eot ') ;一 一 为 了 下 8 及 之 
前 的 版 本 指明 了 EOT 版 本 的 字体 文件 路 人 笃 。 这 个 声明 和 其 他 版 本 的 字体 文件 声明 分 开 的 原因 古 
因为 TE j| bt as FC RE src 搬 述 符 里 面 使 用 逗号 来 分 割 的 多 个 值 。 它 会 把 那 看 作 一 个 路 径 ， 
并 将 使 得 EOT 格式 的 文件 没 法 在 了 正 下 起 作用 。 
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规则 的 下 一 部 分 是 第 二 个 src E, KIH POTE IE Dl bees ATA ACE SET bt 
ar ASS Ft Ik eA CPI, 直到 它 找到 一 个 合适 的 字体 文件 为 止 , 然后 它 就 会 下 载 文件 , 也 
只 有 那个 文件 ， 会 显示 成 文本 。 每 个 字体 文件 声明 都 会 包含 一 个 字体 文件 的 路 任 ， 比 如 
url('fonts/preludeflf-webfont .woff')， 以 及 格式 的 提示 ， 比 如 format('woff'), f 
Theme AEA, (ALK TAY RE ea CPE ARK, HEE Sel bas D 
载 不 能 使 用 的 文件 ， 这 种 下 载 将 会 严重 浪费 带宽 并 降低 页 面 速度 。 


广 省 服务 器 资源 

所 有 的 浏览 器 ,除了 IE 8 及 之 前 的 版 本 之 外 ， 在 CSS 规则 的 字体 定义 中 真正 使 用 这 个 字 
体 之 前 ， 是 不 会 做 任何 下 载 的 。 这 意味 着 你 可 以 在 样式 表 中 声明 大 量 的 efont-face 规则 ,只 
要 你 的 页 面 中 并 没有 什么 地 方 实际 使 用 到 这 些 字 体 ,浏览 器 就 不 会 发 起 一 个 额外 的 HTTP HR 
TACTA, 

相反 地 ，IE 8 RAZA 9A AA BBS] EOT x fF83 FARA T AC, DRAR FR 
入 的 时 候 , 通 第 会 链 入 大 量 的 字体 文件 以 便 观 察 哪 种 字体 的 效果 最 合适 。 请 确保 发 布 时 移 除 那 
些 你 并 不 需要 的 字体 文件 ， 以 保证 下 8 及 之 前 的 版 本 不 会 下 载 没 必要 的 EOT 文件 。 


说 明 WOFF 格式 被 写 在 最 前 面 是 因为 它 是 标准 ， 而 我 们 布 望 如 果 浏 览 器 支持 则 会 首先 使 用 它 。 
它 同 样 也 是 尺寸 最 小 的 格式 ， 因 此 最 好 让 浏览 器 首先 识别 并 使 用 它 。 


你 可 能 会 注意 到 ， 第 二 个 src 的 开始 值 是 1ocal ('@')， 这 个 笑脸 表情 到 底 有 什么 用 ? 

这 个 笑脸 表情 放 在 第 二 个 src 的 开始 处 ， 目 的 古 为 了 保护 IE bias. WRIA EDIE, 
IE 会 尝试 把 第 二 个 src 搬 述 符 的 值 读 作 一 个 路 任 。 这 我 们 之 前 已 经 解释 过 了 ,最终 它 会 叶 致 一 个 
404 错误 。 虽 然 这 不 会 让 @font-face 集 止 工作 一 一 JE 还 十 能 够 使 用 独立 定义 的 EOT 文件 一 一 但 
是 这 是 对 你 的 服务 副 发 起 的 一 个 额外 的 、 无 用 的 请 求 ， 你 显然 不 希望 这 种 事情 发 生 。IE 无 法 理解 
local () 语 法 ， 所 以 将 它 放 在 scc 的 最 前 面 ， 就 可 以 保证 卫 会 完全 忽略 掉 这 条 定义 。 


Local () 的 问题 
让 用 户 避 免 下 载 已 经 安装 过 的 字体 听 起 来 是 个 好 主意 PVA AA local () Pf 
用 真实 的 字体 名 ， 而 要 使 用 笑脸 表情 呢 ? 这 确实 只 是 一 个 可 选项 。Paul Irish 47. “bulletproof 
@font-face Syntax” 是 这 么 做 的 ，Font Squirrel 生成 器 也 是 这 么 做 的 。 当 你 在 local () 中 使 
用 真实 的 字体 名 之 前 ， 应 该 意识 到 以 下 的 几 个 问题 。 
O 不 同 的 字体 可 能 有 同样 的 名 字 。 所 以 很 有 可 能 产生 重 名 问题 ， 这 个 可 能 性 很 小 ， 但 是 
是 有 可 能 的 ， 参 见 http://typophile.com/node/63992， 
O 如 果 用 户 机 器 上 的 字体 是 用 FontExplorer 来 安装 的 话 ,在 Chrome 上 会 遇 到 奇怪 的 问题 ， 
参见 http://snook.ca/archives/html and css/font-face-in-chrome, 
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如 果 用 户 机 器 上 的 字体 是 用 FontExplorer 来 安装 的 话 ， 在 Safari 上 系统 可 能 会 弹出 对 话 框 
来 向 用 户 要 求 使 用 本 地 学 体 的 权限 。 

这 些 问题 并 不 总 是 发 生 ， 但 是 如 果 它 们 发 生 了 ， 影 响 会 非常 坏 。 许 多 Web 字体 专家 建议 
安全 不 要 使 用 local ()。 除 非 你 布 望 阻止 用 户 下 载 的 字体 文件 非常 大 。 


顺便 说 一 下 ，local () 语 法 是 合法 的 CSS。 它 的 真正 用 途 是 在 efont-face 规则 中 指 癌 用 户 
机 绒 上 本 地 安装 的 字体 版 本 , 因此 如 果 用 户 已 经 安装 了 和 你 散 入 的 字体 一 样 的 版 本 ， 那 他 就 无 需 
额外 下 载 文件 了 。 这 就 是 为 什么 贡献 这 段 语 法 的 Paul Irish 建议 在 这 里 使 用 一 个 笑脸 符 的 原因 : 
我 们 并 不 希望 有 可 能 指 辐 一 个 真实 存在 的 文件 ,而 应 该 不 太 可 能 有 人 会 发 布 一 个 字体 , 并 将 其 命 
ZAHO, 

第 二 段 efont-face 规则 声明 了 粗 体 版本 的 Prelude。 它 声明 了 所 有 粗 体 字 体 文 件 的 路 径 
并 且 将 font-weight 设置 成 bold。 但 是 font-family 的 名 字 还 是 Prelude (不 是 PreludeBold 
或 者 其 他 什么 名 字 ) ， 跟 第 一 段 的 名 字 匹 配 。 使 用 同样 的 名 字 可 以 确切 地 各 诉 训 览 妖 这 个 文件 是 
同样 的 Prelude 字体 族 的 粗 体 版 本 。 任 何 时 候 浏 览 喜 需要 加 粗 的 Prelude 文本 时 《比如 HTML 中 
使 用 了 strong 元 素 或 者 CSS 有 font-weight: bold 定义 )， 它 不 会 去 对 第 规 的 字体 做 任何 
加 粗 的 工作 ， 而 是 会 直接 使 用 对 应 的 粗 体 字体 文件 。 使 用 真实 的 粗 体 文件 比 浏 览 姓 模拟 效果 要 
好 多 了 。 











说 明 了 IE 并 不 总 能 正确 地 处 理 @font-face 规 则 里 的 字体 样式 , 当 @font-face 规 则 里 有 font- 
style: italic 时 , IE8 及 之 前 的 版 本 并 不 使 用 指定 的 字体 。IE 9 会 使 用 ， 但 它 强 制 演 
当成 斜体 样式 ， 即 使 你 所 指定 的 字体 并 不 是 斜体 。 


2. 声明 字体 

在 CSS 中 添加 efont-face 并 不 会 实际 上 使 用 某 种 字体 ， 它 只 是 简单 链接 了 这 些 字 体 ， 使 
你 在 需要 使 用 它们 的 时 候 可 以 下 载 并 使 用 。 让 我 们 试 试 在 页 面 的 nl 和 n2 元 素 中 使 用 这 种 字体 。 
使 用 efont-face 中 所 指明 的 字体 名 字 Prelude" ,把 它 添 加 到 n1 和 nh2 的 已 有 的 font- family 
的 值 的 最 前 面 : 


hi { 
margin: -.3em 0 .14em 0; 
colors #414141; 
font-family: Prelude, Helvetica, "Helvetica Neue", 
Arial, sans-serif; 
font-size: 3.5em; 
font-weight: normal; 
} 
h2 { 
clear: left; 
margin: 0 0 -.14em 0; 
color: #414141; 
font-family: Prelude, Helvetica, "Helvetica Neue", 


Arial, sans-serif; 
font-size: 2.17em; 
font-weight: bold; 
} 


字体 栈 中 的 备 选 字体 san-serif 看 起 来 和 手写 的 Prelude 字体 完全 不 同 。 我 选择 这 些 备 选 字体 
只 是 因为 实际 上 目前 根本 没有 任何 手写 的 Web 安全 字体 可 供 我 们 用 作 备 选 。 如 采 某 人 的 训 虎 帮 
不 能 够 支持 字体 藤 入 ， 那 我 宁愿 他 看 到 的 是 请 晰 干净 的 Htlvetica 或 者 Arial 字体 ， 而 不 是 机 絮 上 
BRE SF 
请 注意 hl 规则 将 font-weight 设置 成 普通 而 h2 规则 将 font-weight 设置 成 粗 体 。 这 告 
Drill bt as Eo] hl 元 素 使 用 正常 的 Prelude 字体 (第 一 段 规则 ) ,针对 n2 元 素 则 使 用 粗 体 的 Prelude 
字体 (第 二 段 规则 )。 最 终 效 果 如 图 3-29 所 示 。 
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The trip was heavily focused around Jane Austen sites, both t 


Prejudice. You see, I am an unapologetic Janeite, and I have: 
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quite a bit. You can download the documents listed below to ¢ 
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Derbyshire 


We visited Derbyshire on the first three days of our trip. Wes 
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3-29 ”标题 中 的 手写 Prelude 字体 


我 们 现在 拥有 了 可 以 缩放 、 可 以 选择 也 可 以 索引 的 手写 文本 。 在 不 同 的 浏览 器 中 以 及 在 
Windows 和 Mac 系统 中 存在 不 同 的 文本 抗 锯 齿 和 精 调 效果 ,但 是 使 用 真实 文本 的 优点 足以 让 我 
们 接受 某 些 浏 览 器 中 可 能 存在 的 轻微 锯齿 所 带 来 的 不 一 臻 。( 图 3-30) 


表 3-6 efont-face 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


支持 支持 ，3.5+ 支持 ，10+ 支持 支持 
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图 3-30 AEA ERPE ATR JH la], AE Firefox 3.6, HA% IE 9 


@font-face 规则 的 来 龙 去 脉 


字体 精 调和 抗 锯 交 是 一 个 远 远 超 越 本 书 范围 的 技术 问题 ,如 果 你 想 了 解 更 多 的 话 , 可 以 看 


看 下 面 的 一 些 文 章 。 


@font-face 是 字体 (Fonts) 模块 的 一 部 分 ， 参 见 www.w3.org/TR/css3-fonts , 


@font-face 规则 需要 给 出 一 个 字体 的 名 字 (使 用 font-family 描述 符 ) ， 这 个 名 字 可 
以 任意 指定 ， 同 时 还 要 给 出 一 个 到 多 个 指向 字体 文件 的 路 径 (使 用 src 描述 符 )。 它 也 可 以 包 


括 一 些 样式 特性 (使 用 font-weight, font-style 和 font-stretch)。 你 可 以 通过 指定 
同样 的 字体 名 让 多 个 字体 文件 组 合成 一 个 字体 族 。 

如 果 要 使 用 afont-face 规则 中 链 入 的 字体 文件 , RE 
面 的 字体 栈 加 入 之 前 声明 的 字体 族 的 名 字 。 

Ee COM OC At 

口 创作 一 种 使 用 Web 安全 字体 无 法 实现 的 外 观 。 

O 保证 网 站 的 商标 和 1logo 等 能 够 和 alee J 

O 显示 非 拉 丁 语系 的 字符 ， 它 们 通常 在 浏览 器 的 默认 字体 下 比较 难看 。 使 用 专 为 这 种 语 

言 设计 的 字体 能 够 保证 所 有 的 字符 都 正确 显示 。 

还 有 一 种 使 用 @font-face 的 尝试 是 使 用 符号 字体 来 创建 不 需要 图 片 的 图 标 ,但 是 这 种 方 
法 有 非常 严重 的 可 访问 性 问题 ,参见 http://filamentgroup.com/lab/dingbat webfonts accessibility - 
issues 以 及 http://jontangerine.com/log/2010/08/web-fonts-dingbats-icons-andunicode, 这 里 有 关于 
这 个 问题 的 讨论 以 及 潜在 的 解决 方案 。 


要 简单 地 在 font-family 属性 


还 可 以 用 在 以 下 一 些 场 合 。 


3. 提高 性 能 

你 如 果 现 在 在 训 览 右 里 面 查看 这 个 练习 页 面 , 可 能 会 注意 到 在 页 面 加 载 完 成 和 手写 字体 显示 
之 则 会 有 一 个 涡 后 时 间 。 在 字体 文件 下 载 完 毕 之 前 ,基于 Webkit 的 浏览 绒 无 法 显示 efont-face 
定义 的 字体 效果 (ILE 3-31)。 
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In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip 
to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 


quite a bit. You can download the documents listed below to get an overview of where we went and what we did 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London 
on June 3. We rented a car for the entire non-London portion of our trip, so we were able to explore around 
each day. 

al 





DOWNLOAD: Itinerary(PDF) Itinerary (Word) Map oftrip locations (PDF) 
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3-31 字体 文件 下 载 之 前 无 法 显示 








在 Firefox 和 Opera 上 ， 备 选 的 字体 将 会 显示 一 会 儿 ， 直 到 字体 文件 下 载 完 成 ， 然 后 麟 览 强 
就 会 使 用 新 字体 重新 演 染 文本 。 这 被 称 为 Flash of Unstyled Text, yy FOUT, 2 4 Paul Irish ĝl 
千 的 一 个 词 。 

这 些 字体 加 载 的 沛 后 问题 通常 来 说 不 会 很 严重 ,但 是 在 某 些 场合 下 还 是 很 容易 被 人 注意 到 。 
韭 西 方 语言 的 字体 ， 比 如 中 文 或 者 日 文 , 包含 了 成 十 上 万 的 字符 ， 大 小 通 第 会 按 净 来 计算 。 这 些 
巨大 的 字体 文件 当然 会 花费 很 长 的 时 间 下 载 。 当 持 有 移动 设备 的 用 户 处 于 信号 覆盖 不 好 的 区 域 ， 
或 者 在 网 速 非常 慢 的 宾馆 时 ， 这 些 情形 下 都 要 花 非 常 长 的 时 间 等 待 字 体 下 载 。 











说 明 之 前 所 提 到 的 font-size-adjust 属性 并 不 会 缩短 FOUT 的 过 程 , 但 由 于 它 可 以 使 备用 
字体 的 尺寸 贴 合 Web 字体 ， 所 以 可 以 使 整个 过 程 变 得 平滑 。 但 需要 再 一 次 提醒 的 是 ， 仅 
有 Firefox 支持 它 。 


有 很 多 种 方法 可 以 减少 这 种 等 待 ， 处 理 FOUT 问题 ， 或 者 说 Webkit 上 文本 不 可 见 的 问题 。 

O 保持 你 的 字体 文件 尽 可 能 小 ， 尽 可 能 的 减少 字体 文件 中 的 字符 ， 做 到 只 包含 需要 的 字符 
当然 是 最 好 。Font Squirrel 的 生成 絮 就 能 够 帮 我 们 做 到 这 一 点 。 

O 把 efont-face 规则 放 在 CSS 的 最 上 方 。 这 会 增加 字体 文件 优先 加 载 的 机 率 ， 比 如 它 就 
可 能 在 背景 图 片 之 前 加 载 。 

O 让 神 蜗 如 尽快 局 动 字体 文件 的 下 载 ， 比 如 在 页 面 开始 处 的 隐 天 元 素 里 面 就 请 求 对 字体 的 使 
用 。 有 很 多 图 片 预 取 技术 可 以 参考 运用 到 字体 文件 上 ， 人 参见 这 里 http//perishablepress. 
com/press/tag/preloadimages , 

OP REAR, WARE TEE aS FT ee EF AIRS HU, PRP IK PE 
一 种 几率 ， 访 客 的 缓存 里 面 可 能 早 就 存在 这 种 字体 了 ， 所 以 就 不 必 再 从 一 个 私有 的 地 址 
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上 再 次 下 载 了 。 之 前 列 出 来 的 字体 艇 入 服务 能 够 帮助 你 做 到 这 一 上 后， 比如 说 Google 的 字 
体 目 录 服 务 。 你 其 至 可 以 上 传 你 的 字体 到 TypeFront 服务 上 去 (http://typefront.com) 。 
TypeFront 可 以 伺服 你 上 传 的 字体 ， 将 它们 转换 成 各 种 所 需 的 格式 ， 还 能 限制 只 对 哪儿 个 
网 站 提供 这 种 字体 鸭 服 务 。 

O 在 .htaccess 里 面 将 超时 设 得 很 长 , 这 样 能 保证 字体 文件 只 被 下 载 一 次 。 曾 贤 絮 会 缓存 这 个 
字体 文件 ， 并 且 在 很 长 一 段 时 间 内 不 再 发 起 请 求 。 这 对 页 面 的 第 一 次 访问 没有 任何 帮助 ， 
但 是 对 后 续 的 请 求 还 是 很 有 好 处 的 (参见 Steve Lamm 的 “HTTP 缓存 ”http://code.google. 
com/speed/articles/caching.html) 。 

O 用 Gzip 压缩 你 的 字体 文件 。Stoyang Stefanov 发 现 Gzip 之 后 平均 文件 大 小 将 会 减少 百 分 
之 40 到 45( 人 参见 www.phpied.com/gzip-your-fontface-files ) 。 但 是 他 同时 也 发 现 这 对 WOFF 
字体 文件 没有 太 大 的 帮助 ， 因 为 这 种 格式 已 经 有 较 高 的 压缩 率 了 ， 因 此 这 可 能 对 Firefox 
中 存在 的 FOUT 问题 没有 多 大 的 改善 (参见 www.phpied.com/font-facegzipping-take-ii) , 
但 Gzip 还 是 能 够 帮助 Opera 改善 FOUT 问题 ,也 能 帮助 Safari 和 Chrome 更 快 地 显示 文本 。 

O 在 浏览 合 下 载 字 体 文件 期 间 ， 使 用 脚本 来 隐藏 页 面 上 的 所 有 内 容 。 这 对 字体 下 载 的 实际 
速度 没有 任何 意义 ， 但 是 避免 用 户 看 到 FOUT 问题 的 整个 变化 过 程 。Paul Irish 提供 了 两 
个 脚本 帮助 我 们 这 么 做 ， 其 中 一 个 使 用 了 Google 的 Web 字体 JavaScript 加 载 库 
(http://paulirish.com/2009/fighting-the-font-face-fout) 。 

我 们 的 字体 文件 已 经 使 用 了 最 小 子 集 ， 并 且 放 在 了 CSS 文件 的 最 开始 处 ， 因 此 基本 上 履 盖 

了 efont-face 性 能 的 最 佳 实践 。 对 页 面 做 脚本 或 者 服务 如 问 的 优化 已 经 超越 了 本 书 所 涵盖 的 内 
容 ， 但 当 你 在 Web 字体 的 加 载 时 间 方 面 过 到 问题 时 ， 不 妨 试 试 上 面 这 些 办 法 。 


3.4 ”大功告成 














我 们 已 经 完成 了 对 这 个 文 草 页 所 做 的 样式 工作 ， 现 在 它 已 经 真 的 像 一 页 纸 质 笔记 了 。 在 
一 个 现代 的 非 卫 议 贤人 右 里 面 ， 你 应 该 能 够 看 到 如 图 3-32 所 示 的 效 末 ， 可 以 拿 它 跟 图 3-1 比较 
mi 

IE 9 的 预 宽 版 没 法 显示 边 绿 的 撕 纸 效 来 , 但 是 看 起 来 跟 图 3-32 基本 上 差不多 了 。IE S 及 之 前 
的 版 本 缺失 了 大 部 分 图 像 效 末 , 但 古 它们 也 能 显示 线 格 痛 景 图 片 和 手写 字体 ,总体 表现 还 是 很 有 
吸引 力 ， 也 比较 像 纸 质 笔记 页 (ILE 3-33)。 与 此 同时 ， 这 个 例子 里 面 所 有 IE 8 及 以 前 版 本 显示 
ASEH $c, EB TE 5.5 也 能 显示 图 3-33 的 效 朱 。 








说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 paper_final.html 页 面 里 , 它 在 你 下 载 的 本 章 的 示 
例文 件 中 。 
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to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London 
on June 3. We rented a car for the entire non-London portion of our trip, so we were able to explore around 


quite a bit. You can download the documents listed below to get an overview of where we went and what we did 
each day. 





DOWNLOAD: [Itinerary (PDF) Itinerary (Word) Map oftrip locations (PDF) 


We visited Derbyshire on the first three days of our trip. We stayed at a B&B 
called Bassett Wood Farm in the little village of Tissington, where the annual 
well dressing happened to be occuring at the same time. The landscape of 
Derbyshire was gorgeous; I can see why Elizabeth Bennet was so impressed. 
My highlights were visiting the two houses used for Pemberley in the Pride 
& Prejudice mini-series. I even got to see the little pond where Colin Firth's 
famous wet shirt scene occurs. 





DOWNLOAD: Cary riding a horse for the first time (MOV) 
ZoeatLyme Park Cary and Zoe in Dovedale Valley 
Zoe at Sudbury Hall 


Cotswolds 


The next seven days were spent traveling all around the Cotswolds and the 


surrounding area. We stayed at a cottage in the famously picturesque village 
of Bibury. We explored more than a dozen other Cotswolds villages. 





One of our favorite towns in the Cotswolds was Cirencester, because of the 
great food we had there and the Corinium Museum. The collection of 
Roman (and earlier) artifacts at the museum was much larger than we 


expected and quite fascinating. 


The more ancient something is, the better Cary loves it, especially if it's all 
in ruins. So, Cary's highlights in the Cotswolds were not just the Roman 
museum but also the unearthed Chedworth Roman Villa and the ruins of 
Minster Lovell Hall. One of our favorite memories from the area was our wet, cold trek to the Belas Knap burial mound, built 
around 2500 BC. Drying out and warming up in the pub afterwards was lovely, and the whole thing was just so English. 





DOWNLOAD: ZoeandCaryinafield of sheep ZoeinBibury Cary at Minster Lovell Hall 


Day-trips prom the Cotswolds 


While staying in Bibury, we took a couple trips out of the Cotswolds proper. 


One day-trip was to Bath to see the Jane Austen sites and, of course, the 
Roman Baths (which are also Jane Austen related, incidentally). On the way 
back from Bath, we stopped at the village of Lacock, which was used for 
Meryton in the Pride & Prejudice mini-series (along with a bunch of other 
movies). 


Another day-trip took us into Wales to see the ruins of Chepstow Castle. 


This was one of Cary's highlights during the trip. It was very large and quite 
impressive. On the way to Wales, we successfully hunted down the private 


图 3-32 最终 页 面 的 效果 〈 另 见 彩 播 图 3-32) 








England Trip, 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our Vermont 
vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London on June 
3. We rented a car for the entire non-London portion of our trip, so we were able to explore around quite a bit. You can 


download the documents listed below to get an overview of where we went and what we did each day. 





DOWNLOAD: Itinerary (PDF) Itinerary (Word) Map of trip locations (PDF) 


We visited Derbyshire on the first three days of our trip. We stayed at a B&B called 
Bassett Wood Farm in the little village of Tissington, where the annual well dressing 
happened to be occuring at the same time. The landscape of Derbyshire was 
gorgeous; I can see why Elizabeth Bennet was so impressed. My highlights were 
visiting the two houses used for Pemberley in the Pride & Prejudice mini-series. I 
even got to see the little pond where Colin Firth's famous wet shirt scene occurs. 


DOWNLOAD: Cary riding a horse for the first time (MOV) Zoe at Lyme Park 
Cary and Zoe in Dovedale Valley Zoe at Sudbury Hall 


Cotswolds 


The next seven days were spent traveling all around the Cotswolds and the 
surrounding area. We stayed at a cottage in the famously picturesque village of 
Bibury. We explored more than a dozen other Cotswolds villages. 





One of our favorite towns in the Cotswolds was Cirencester, because of the great 
food we had there and the Corinium Museum. The collection of Roman (and 
earlier) artifacts at the museum was much larger than we expected and quite 


The more ancient something is, the better Cary loves it, especially if it's all in ruins. 
So, Cary's highlights in the Cotswolds were not just the Roman museum but also the 
unearthed Chedworth Roman Villa and the ruins of Minster Lovell Hall. One of our 
favorite memories from the area was our wet, cold trek to the Belas Knap burial mound, built around 2500 BC. Drying out and warming up 
in the pub afterwards was lovely, and the whole thing was just so English. 





DOWNLOAD: ZoeandCaryinafieldofsheep ZoeinBibury Cary at Minster Lovell Hall 


图 3-33 IE (最 高 到 版 本 8) 没 法 显示 所 有 的 图 像 细 节 ， 但 是 能 够 显示 手写 字体 








根据 类 型 为 图 片 和 链接 
定义 梓 陈 


在 网 络 上 你 很 难 找到 一 个 没有 链接 和 图 片 的 页 面 。 除了 指向 其 他 页 面 之 外 , 这些 链接 还 可 能 
指 同 一 些 不 同类 型 条 文档 ， 比 如 PDF 或 视频 文件 。 而 那些 图 片 则 可 以 分 为 不 同 的 类 型 ， 如 照 厂 、 
插图 或 图 表 。 使 用 CSS3 可 以 很 方便 地 根据 图 片 和 链接 本 和 映 的 独特 类 型 来 定义 样式 ,但 也 需要 花 
性 更 多 的 时 间 和 精力 ， 需 要 更 复杂 有 的 结构 。 你 可 以 借助 CSS3 中 新 的 选择 大 以 一 种 更 特别 、 高 效 
的 方式 分 别 定位 不 同类 型 的 链接 和 图 片 。 值 得 再 次 重申 的 是 ，CSS3 的 出 现 可 以 同时 提升 你 的 开 
发 效率 和 页 面 的 执行 效率 。 





你 将 学 到 

我 们 将 根据 链接 的 类 型 为 其 增加 图 标 , 并 单独 为 照片 型 的 图 片 定义 不 同 的 样式 , 这 需要 用 
到 如 下 CSS3 选择 器 : 

口 “ 值 末 匹配 ”(End ofthe Value) ($) 属性 选择 器 ; 

口 “ 值 中 包 念 ”(Somewhere in the Value) (*) 


41 基础 页 面 


这 次 我 们 将 要 使 用 的 起 始 页 面 定 第 3 草 的 完成 版 页 面 ( 见 图 4-1)。 它 包含 了 大 量 不 同类 型 的 
链接 ,然而 目前 所 有 的 这 些 链接 部 是 相同 的 样式 。 如 来 能 为 特定 的 文件 链接 定义 不 同 的 样式 , 体 
验 应 该 会 很 不 错 ， 这 样 就 能 在 用 户 打 开 文档 之 前 给 他 一 个 视觉 提示 。 该 页 面 同样 包含 大 和 干 图 片 ， 
它们 多 数 部 是 照片 , 仅 有 一 幅 是 地 图 的 缩 上 略图。 同样 地 ， 如 末 能 为 照片 单独 定义 样式 ， 效 有 末 也 会 
很 好 ， 但 至 今 为 止 所 有 的 图 片 都 仍 拥有 同样 的 样式 .。 
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$ England Trip 2007 - 


€ In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip 
-9 to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


9 
The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 

e& 

© Kinny 

b. The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London 


on June 3. We rented a car for the entire non-London portion of our trip, so we were able to explore around 





quite a bit. You can download the documents listed below to get an overview of where we went and what we did 
each day. 





DOWNLOAD: [itinerary (PDF) Itinerary (Word) Map oftrip locations (PDF) 


We visited Derbyshire on the first three days of our trip. We stayed at a B&B 
called Bassett Wood Farm in the little village of Tissington, where the annual 
well dressing happened to be occuring at the same time. The landscape of 
Derbyshire was gorgeous; I can see why Elizabeth Bennet was so impressed. 
My highlights were visiting the two houses used for Pemberley in the Pride 
& Prejudice mini-series. I even got to see the little pond where Colin Firth's 
famous wet shirt scene occurs. 
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DOWNLOAD: Cary riding a horse for the first time (MOV) 
ZoeatLyme Park Cary and Zoe in Dovedale Valley 
Zoe at Sudbury Hall 


Cotswolds 


The next seven days were spent traveling all around the Cotswolds and the 
surrounding area. We stayed at a cottage in the famously picturesque village 
of Bibury. We explored more than a dozen other Cotswolds villages. 


/ 
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One of our favorite towns in the Cotswolds was Cirencester, because of the 
great food we had there and the Corinium Museum. The collection of 
Roman (and earlier) artifacts at the museum was much larger than we 
expected and quite fascinating. 


6666 


The more ancient something is, the better Cary loves it, especially if it's all 
in ruins. So, Cary's highlights in the Cotswolds were not just the Roman 
museum but also the unearthed Chedworth Roman Villa and the ruins of 
Minster Lovell Hall. One of our favorite memories from the area was our wet, cold trek to the Belas Knap burial mound, built 
around 2500 BC. Drying out and warming up in the pub afterwards was lovely, and the whole thing was just so English. 





DOWNLOAD: ZoeandCaryinafield of sheep ZoeinBibury Cary at Minster Lovell Hall 
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图 4-1 所 有 的 链接 邦 古 相同 的 样式 ， 图 片 也 是 一 样 


4.2 ”什么 是 属性 选择 器 


我 们 可 以 使 用 属性 选择 器 (Attribute Selectors) 来 针对 不 同类 型 的 链接 和 图 片 定义 不 同 的 样 
式 。 属 性 选择 器 既 强 大 又 实用 ,借助 它 你 可 以 定位 到 HTML 里 的 某 个 元 素 却 无 需 知 晓 其 ID 或 
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类 名 。 属 性 选择 和 如 是 根据 元 素 的 菏 个 特定 属性 是 人 否 存 在 或 其 属性 值 是 耕 符 合 匹 配 条 件 来 定位 到 
它 的 。 


说 明 一 个 属性 选择 器 并 非 只 能 与 类 型 选择 器 (Type Selectors) 关联 起 来 使 用 。 你 可 以 将 它 与 任 
何 简 单 选择 器 (Simple Selector) 组 合 使 用 。 比 如 说 .warning[title]l 就 结合 了 一 个 类 选 
择 器 (Class Selector) 和 一 个 属性 选择 器 。 你 也 可 以 单独 使 用 它 ，[title] 将 选择 每 个 拥 
A title 属性 的 元 素 。 


举例 来 讲 , img [alt] 征 由 一 个 类 型 选择 匣 img 和 一 个 紧 随 其 后 的 属性 选择 如 [alt] 组 合 而 成 。 
所 有 的 属性 选择 如 都 被 方 括号 包围 着 ， 括 号 中 的 内 容 则 根据 你 想 要 碗 择 的 内 容 而 定 。img [alt] 
这 个 选择 袁 的 目标 是 所 有 设置 了 alt 属性 的 img 元 素 。 在 你 的 测试 页 面 使 用 这 个 选择 融 ， 可 以 
给 所 有 拥有 alt 属性 的 图 片 定义 一 个 亮 绿 色 的 外 框 ， 这 样 一 来 就 可 以 一 目 了 然 地 知道 哪些 没有 
外 框 的 图 片 需要 补 上 alt 属性 。 


img[alt] { 
border: 3px solid #0C0; 





} 

<img ercs"phoLos/poespg" width="320" height="241" 
3alt-"My cat Poe"> 

<img src=" photes/dog.j 00" width="320" height="240"> 





Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id neque elit. 
Vestibulum sodales, eros nec mattis auctor, ligula nunc facilisis arcu, eget ultricies 
nulla dui ac est. Vestibulum in placerat nibh. Proin vel pharetra orci. Sed dictum 
lectus a eros hendrerit blandit. Fusce aliquam bibendum mollis. Cum sociis natoque 
penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse ut 


eros tortor. Suspendisse pulvinar augue vel ipsum facilisis vel volutpat est pretium 
Donec vel leo enim. Curabitur quis tincidunt orci. Sed tempor porta erat ac 
malesuada. Curabitur faucibus, dui ut condimentum volutpat, odio massa sodales 
massa, a laoreet sem ante vitae nisi. Quisque sollicitudin, tellus nec consequat 
vulputate, arcu elit blandit mauris, eu congue massa diam eu lectus. Vivamus 
hendrerit lacus sed tortor cursus fringilla. 


Duis non ante a mi feugiat ullamcorper. Morbi pharetra quam in justo pretium feugiat 
Aenean ut turpis ut nulla pellentesque ultrices aliquet sed leo. Nunc accumsan eros at 
justo interdum lobortis scelerisque odio imperdiet. Nunc at risus magna. Maecenas 
non mauris eget dui accumsan porta. Curabitur nec erat urna. Nulla facilisi. Donec 
elementum mattis augue, a bibendum lorem viverra sit amet. Nam non ipsum vel velit 
pretium mattis. Nam a risus nulla, et condimentum tellus 


Sed varius quam sed ligula tempor euismod. Donec et felis leo, ac fringilla nibh. Fusce 
vestibulum tincidunt consequat. Pellentesque pretium tincidunt velit, consectetur 
consequat sapien viverra nec. Suspendisse a enim id est tempor sollicitudin sed non 
diam. Aliquam porttitor rhoncus felis sit amet fringilla. Integer consequat gravida 
condimentum. Praesent quis leo nec nulla volutpat viverra sit amet id est. Sed 


4-2 Fak FAY img 元 素 拥有 alt 属性 ， 因 此 它 有 绿色 外 框 。 但 狗 的 图 片 却 没 有 


img[alt] 是 属性 选择 器 最 简单 的 示例 之 一 一 一 它 只 检查 某 个 属性 是 否 存 在 ,但 与 其 属性 取 
值 无 关 。 它 也 是 CSS 2.1 规范 所 包含 的 4 个 属性 选择 侨 ( 见 表 4-1) 中 的 一 个 。 
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表 4-1 CSS 2.1 属 性 选择 器 
属性 选择 器 功 能 
[ater 匹配 拥有 attz 属 性 的 元 素 ， 与 属性 的 取 值 无 关 
[attr=val] 匹配 拥有 attr 属 性 的 元 素 ， 其 属性 值 必须 刚好 等 于 val 
[attr~=val] ”匹配 拥有 attr 属 性 的 元 素 , 其 属性 值 是 用 空格 分 隔 开 来 的 单词 列表 , 其 中 之 一 必须 刚好 等 于 val 
[attrl-val] ”匹配 拥有 attr 属 性 的 元 素 ， 其 属性 值 必 须 刚好 等 于 val， 或 者 以 val 开 始 并 紧 跟 着 一 个 连 字 符 

















W3C 将 这 些 CSS 2.1 的 属性 选择 器 称 作 局 性 存在 性 及 值 (匹配 ) 选 择 器 (Attribute Presence and 
Value Selectors ) 。 


CSS3 引入 了 3 个 全 新 的 属性 选择 左 ， 它 们 可 以 为 你 想 要 匹配 的 目标 提供 更 为 精确 的 控制 。 
表 4-2 CSS3 属 性 选择 器 


属性 选择 器 Ij 能 
[attr^-val] 匹配 拥有 attr 属 性 的 元 素 ， 其 属性 值 必须 以 val 开 始 
[attr$-val] 匹配 拥有 attr 属 性 的 元 素 ， 其 属性 值 必须 以 val 结 束 
[attr*-val] 匹配 拥有 attr 属 性 的 元 素 ， 其 属性 值 必须 包 仿 val 


提示 如 果 你 在 书写 一 个 复杂 的 选择 器 时 感到 困 感 ， 可 以 将 它 贴 入 SelectORacle (http://gallery. 
theopaleroup.com/selectoracle) ， 它 将 用 平实 的 英语 (或 西班牙 语 ) 讲解 这 个 选择 器 将 匹配 
哪些 目标 元 素 。 


W3C 将 这 些 CSS3 的 属性 选择 缕 称 作 子 (字符 ) 串 匹 配属 性 选择 器 (Substring Matching 
Attribute Selectors) ， 因 为 它 只 匹配 属性 值 的 一 部 分 而 不 是 全 部 。 

属性 选择 如 配合 示例 才 最 容易 理解 ， 所 以 现在 我 们 把 它们 加 到 页 面 里 来 看 看 效果 ,并 了 解 一 
下 实际 用 起 来 到 的 如 何 。 





4^ ft 

一 个 名 为 “不 匹配 的 属性 选择 器 可 能 是 相当 实用 的 , 你 可 以 用 它 来 选择 所 有 不 匹配 给 定 
REY ALK. BB, AY MAES RIAN input 元 素 定 义 样式 ， 你 可 以 用 它 来 创建 这 样 一 
条 规则 一 一 “找到 所 有 type 属性 值 不 为 submit 的 input AR”, 

遗憾 的 是 , 目前 并 不 存在 这 样 一 个 属性 选择 器 , 但 有 一 个 方法 可 以 模拟 实现 : 使 用 “:not 
选择 器 "， 它 是 CSS3 的 一 个 新 伪 类 。 它 选择 与 你 指定 的 条 件 刚 好 相反 的 那些 元 素 。 因 此 ， 
input :not ([type=submit]) 这 样 一 个 选择 器 便 会 告诉 浏览 器 “找到 所 有 type 属性 值 不 为 
submit 的 input 元 素 ”。:not 选择 器 兼容 于 除了 正 8 及 之 前 版 本 之 外 的 所 有 主流 浏览 器 。 你 
可 以 从 http://kilianvalkhof.com/2008/css-xhtml/the-css3-not-selector 获得 更 多 有 关 它 的 信息 。 

如 果 你 正在 使 用 JavaScript 框 架 ， 它 可 能 已 经 包含 了 某 种 “不 匹配 ”属性 选择 器 ; 请 参阅 
jQuery (http://api.jquery.com/attribute-not-equal-selector) 和 MooTools (http://mootools.net/docs/ 
core/utilities/selectors) 的 选择 器 相关 文档 。 
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4.3 用 动态 添加 的 图 标 指 示 文 件 类 型 


开始 之 前 ， 请 到 www.stunningcss3.com 下 载 本 章 的 示例 文件 并 用 编辑 强 打 开 selectors_ 
start.html 页 面 。 其 CSS 的 定义 包含 于 页 面 head 里 的 一 个 style 元 素 里 。 该 页 面 和 第 3 章 的 文 
件 相同 ， 你 也 可 以 将 第 3 章 的 最 终 页 面 作为 本 章 的 起 始点 。 

纵 观 整个 页 面 ， 有 链接 对 如 下 类 型 的 文档 提供 下 载 : 

口 PDF 

u MOV 

u DOC 

L] JPG 

某 些 情况 下 ， 我 会 将 文件 类 型 括 起 来 置 于 链接 文字 的 末尾 来 提示 用 户 ， 比 如 “旅游 路 线 图 
(PDF) ”。 我 希望 告知 用 户 当 他 点 击 革 些 链接 时 可 能 局 动 额外 的 应 用 程序 (例如 Adobe 公司 的 PDF 
阅读 器 Acrobat Reader) ， 或 是 弹出 下 载 询问 框 。 但 作为 一 个 普通 的 人 类 ,我 可 能 无 法 保证 在 每 个 
类 似 的 链接 后 都 加 上 文件 类 型 的 提示 。 又 或 者 该 页 面 是 CMS 程序 的 一 部 分 ， 由 我 那 不 说 技术 的 
客户 来 负责 增加 链接 ， 现 在 怎么 办 ? 他 甚至 可 能 不 愿 去 增加 这 个 友好 的 文件 类 型 提示 。 

一 个 更 加 万 无 一 失 的 办 法 便 是 使 用 属性 选择 器 来 增加 文件 类 型 的 提示 , 而 这 一 切 将 由 浏览 器 
自动 完成 。 所 有 链接 的 末尾 都 有 文件 类 型 后 级 ， 因 此 我 们 使 用 “ 值 末 匹 瑟 ”(End of the Value) 
这 个 属性 选择 絮 来 检查 文件 后 级 ， 并 为 其 a 元 素 增加 与 之 相对 应 的 图 标 背 景 。 

首先 ， 在 增加 背景 图 之 前 先 给 文件 下 载 列表 里 的 a 元 素 做 一 些 准 备 工作 : 


ul a { 




















display: block; 

min-height: 15px; 
padding-left: 20px; 
background-repeat: no-repeat; 
background-position: 0 3px; 


} 

这 段 定义 会 使 链接 变 成 块 元 素 , 并 拥有 与 图 标高 度 相符 的 最 小 高 度 值 ， 这样 一 来 图 标 就 不 会 
显示 不 全 。 它 还 增加 了 左 内 边 距 ， 为 了 给 图 标 腾 出 显示 的 空间 。 每 个 图 标的 背景 图 片 将 仅 显 示 一 
次 (no-repeat)， 而且 比 链接 文字 的 顶部 低 3 个 像素 (0 3px), 


何 时 需要 加 上 引号 
只 有 当选 择 器 的 值 是 字符 串 时 才 需 要 加 上 引号 。 如 果 值 是 标识 符 ,就 不 必 为 其 加 上 引号 ， 
但 即使 加 上 也 无 妨 。 标 识 符 与 字符 串 的 区 别 基 本 上 在 于 标识 符 限定 了 它 可 以 包含 或 作为 其 前 级 
的 字符 。 关 于 标识 符 的 定义 ， 请 参阅 www.w3.org/tr/css21/syndata.html#value-def-identifier; 而 
字符 串 的 定义 则 请 参阅 www.w3.org/tr/css2 1/syndata.html#strings , 
如 果 你 不 想 费 脑筋 记忆 这 些 区 别 ， 安 全 起 见 你 可 以 给 属性 选择 器 的 值 统 统 加 上 引号 。 
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现在 我 们 可 以 增加 属性 选择 如 来 匹配 每 个 文件 类 型 的 后 级 


alhref$=".pdf"] { 

background-image: url(images/icon pdf.png); 
j 
a[href$=".doc"] { 

background-image: url(images/icon, doc.png); 
j 
a[href$=".mov"] { 

background-image: url(images/icon film.png); 
j 
a[lhref$=".jpg"] d 

background-image: url(images/icon, photo.png); 


} 


说 明 这 些 图 标 文件 来 自由 Mark James 设计 的 famfamfam Silk 免费 图 标 集 (www.famfamfam. 
com/lab/icons/silk) , 


gE EE as RJ href S-E UM baw Ze “FREI PU LAIT RES ER href 属性 值 ， 而 接 
PARAS ge 5 | cr Ha A TR Eb An oa £— dt HA DEC So. A GE S TESI RE 
元 素 时 ， 便 对 它们 应 用 背景 图 的 样式 ， 从 而 为 链接 添加 相应 的 图 标 ( 见 图 4-3), 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home 


rented a car for the entire non-London portion of our trip, so we were able to explore around qi 


documents listed below to get an overview of where we went and what we did each day. 


DOWNLOAD: 人 |Itinerary (PDF) M Itinerary (Word) 上 | Map of trip locations (PDF) 


We visited Derbyshire on the first three days of our trip. We stayed at a B&B called Bassett 
Wood Farm in the little village of Tissington, where the annual well dressing happened to be 
occuring at the same time. The landscape of Derbyshire was gorgeous; I can see why 
Elizabeth Bennet was so impressed. My highlights were visiting the two houses used for 
Pemberley in the Pride & Prejudice mini-series. I even got to see the little pond where Colin 
Firth's famous wet shirt scene occurs. 


DOWNLOAD: Cary riding a horse for the first time (MOV) [Œ| Zoe at Lyme Park 
Œ| Cary and Zoe in Dovedale Valley (|S) Zoe at Sudbury Hall 








4-3 现在 每 个 链接 的 旁边 都 有 一 个 与 其 文件 类 型 相对 应 的 图 标 了 





说 明 至 此 为 止 的 所 有 修改 都 在 selectors_1.html 页 面 里 , 它 在 你 所 下 载 的 本 章 的 示例 文件 
di. ER 
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图 标的 缩放 
除了 对 链接 设置 min-height 来 确保 背景 图 标 不 会 被 截断 显示 以 外 ， 你 还 可 以 用 
background-size 来 让 图 标 与 文字 进行 等 比 缩放 。 相 应 的 规则 应 该 看 起 来 如 下 所 示 : 


ul se Pater { 
display: block; 
pedding—-lere: 20px; 
background-repeat: no-repeat; 
background- positions 0 30x; 
-moz-background-size: 1.2em; 
-webkit-background-size: 1.2em; 
background-size: 1.2em; 


} 

但 是 ,在 示例 页 面 里 我 并 没有 加 入 这 段 代 码 ,， 因为 当 浏 览 器 对 图 标 进 行 缩放 时 ,它们 会 变 
得 模糊 一 一 即使 是 将 图 标 缩 小 而 不 是 拉 伸 。 对 于 线条 清晰 的 图 标 , 特别 是 这 些小 图 标 , 我 并 不 
建议 让 浏览 器 本 身 对 其 进行 缩放 显示 。 但 请 记 住 这 一 条 技巧 ， 当 你 下 次 遇 到 边缘 不 太 清 晰 的 图 
片 时 ， 因 缩放 带 来 的 显示 模糊 将 不 会 那么 显眼 。 


43.1 除 图 标 之 外 的 备 选 方案 


我 们 已 经 完成 了 对 链接 图 标的 样式 定义 ,如 果 你 愿意 ,还 可 以 将 属性 选择 器 使 用 在 其 他 的 场景 。 

1. 放弃 图 片 而 改 用 文字 描述 

图 标 可 以 很 好 地 起 到 帮助 并 提示 用 户 的 作用 , 但 是 如 朱 你 希望 提示 显得 更 醒目 和 明确 ,你 可 
以 选择 使 用 “内 容 生成 ”特性 在 链接 的 后 面 增 加 文件 类 型 的 后 缀 名 ， 它 可 以 用 来 葡 换 图 标 或 是 作 
为 图 标的 补充 。 

你 首先 需要 确保 这 些 文件 的 后 绥 名 信息 并 没有 被 你 手工 添加 到 链接 上 。 接 着， 你 需要 添加 以 
下 的 样式 规则 ， 举 例 而 言 ， 要 为 每 个 PDF 文件 的 链接 之 后 加 上 “(PDF)” FFE, REA: 


a[hrefS-".pdf"]:after { 
contents '" (PDF): 








2. 组 合 多 个 属性 选择 器 

和 其 他 类 型 的 选择 副 相 同 ， 你 可 以 将 多 个 选择 如 组 成 一 个 来 方便 你 更 精确 地 控制 想 要 匹配 的 
JCR o FERN, BRIA Atala) PNG 图 片 的 链接 显示 相片 图 标 , 但 恰好 需要 显示 图 表 图 标的 图 片 也 
是 PNG 格式 的 ， 你 该 怎么 办 呢 ?” 以 下 的 选择 帮 便 可 以 解决 这 一 问题 ， 当 然 它 取决 于 图 片 的 命名 : 


alhref$=".png"] [href*="chart"] { 
background-image: url(images/icon chart.png); 














XX we Peas a UE Mia “FRET href 的 属性 值 以 “ .png ”结尾 且 包 售 ‘chart’ 字样 的 
JUR ”。 这 样 一 来 ， 以 下 所 有 的 链接 都 将 被 匹配 : 


<a href="images/chart_locations.png"> 
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<a href="images/piechart.png"> 
<a href="charts/travel.png"> 


4.3.2 修正 IE 6 的 问题 


IE6 和 是 主流 六 览 吉 中 唯一 不 支持 属性 选择 龙 的 ， 因 此 将 不 会 显示 那些 图 标 。 仅 有 的 解决 方案 
便 是 加 载 脚 本 来 提供 对 属性 选择 絮 的 支持 。 

1. 增加 针对 IE 的 修正 脚本 

Dean Edwards 编写 的 一 个 脚本 能 够 使 你 代码 里 的 这 些 高 级 选择 如 成 功 地 发 生 功 用 , 但 令 人 纳 
问 的 是 这 个 脚本 名 叫 “ 耻 7” (http://code.google.com/p/IE 7-js)。 你 可 以 下 载 这 个 脚本 并 放 进 你 的 
网 站 进行 本 地 调用 ， 也 可 以 直接 引用 Google Code 上 的 公共 版 本 。 引 用 公共 版 本 的 好 处 是 : 访客 
在 训 览 其 他 网 站 时 已 经 加 载 过 这 个 脚本 , 那么 在 访问 你 的 页 面 时 将 从 缓存 里 直接 读 取 , 这 样 会 使 


页 面 加 载 得 更 快 。 
将 公共 版 本 的 脚本 引入 页 面 的 headq 中 ， 并 加 上 IE 6 才能 识别 的 条 件 注释 : 
<!--[if IE 6]> 


<script src-"http://IE 7-js.googlecode.com/svn/ 
version/2.1(beta4)/IE 7.js"»«/script» 
«l[endif]--» 


该 脚本 将 使 IE 6 At ie e i e PEE as FF iL Alek, 但 它 会 引发 一 个 奇怪 的 问题 , 即 链 
接 本 和 号 会 出 现 空白 并 折 行 。 为 了 修复 这 个 问题 , 我们 要 使 链接 变 成 inline-block 并 将 white- 
space 设置 为 nowrap， 但 这 又 会 引发 其 他 浏览 絮 的 一 些小 问题 。 因 此 ， 我 们 需要 对 html 标签 
加 上 与 我 们 在 第 2 章 里 所 使 用 的 相同 的 条 件 注 释 来 创建 只 有 IE 6 才能 识别 的 规则 。 
找到 页 面 起 始 处 的 html 标签 ， 将 它 更 改 成 如 下 HTML 代码 : 











<!--[if lt IE 7 ]»«html lang="en" class="ie6"><! [endif]--> 
<!--[if IE 7 ]><html lang-"en" class="ie7"><! [endif]--> 
<!--[if IE 8 ]><html lang-"en" class="ie8"><! [endif]--> 
<!--[if IE 9 ]><html lang-"en" class="1e9"><! [endif]--> 
<!--[if gt IE 9]><html lang="en"><![endif]--> 

<!--[if !IE]»--»«html lang-"en"»«!--«![endif]--» 





提示 如 果 不 想 手动 输入 上 述 代 码 , 请 在 本 章 的 示例 文件 里 找到 并 打开 selectors final.html 
页 面 ， 将 这 部 分 代码 复制 粘贴 到 你 的 页 面 。 


现在 你 就 可 以 增加 只 有 IE 6 才能 识别 的 代码 了 : 


.lie6 ula { 
display: inline-block; 
white-space: nowrap; 
j 
IE 6 Sj ERI, ftbi] bt as AEREI IE T$ 7 Ahez JavaScript 功能 已 局 用 。 如 采 某 个 IE 6 
用 户 禁 用 JavaScript， 那 么 他 将 看 不 到 那些 图 片 。 这 设 有 问题 一 一 这 些 图 标 只 是 功能 上 的 改进 ， 而 
并 非 必 要 内 容 。 但 禁用 JavaScript a, IE 6 将 依旧 读 取 ul a 这 条 规则 ， 它 会 给 每 个 链接 增加 额 
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外 的 内 边 距 ， 从 而 使 正 6 上 的 链接 之 间 出 现 不 必要 的 空 自 。 为 了 解决 这 个 问题 ， 请 为 ul a 和 .IE 
6 ul a 两 条 规则 都 加 上 如 下 的 [href] 属 性 选择 器 : 


ul a[href] { 
display: block; 
min-height: 15px; 
padding-left: 20px; 
background-repeat: no-repeat; 
background-position: 0 3px; 

} 

.1e6 ul a[href] ( 
display: inline-block; 
white-space: nowrap; 


这 些 规 则 匹配 的 目标 是 所 有 ul 元 素 下 拥有 href 属性 的 a 元 素 ， 这 些 规则 与 改动 前 的 规则 
所 匹配 的 链接 完全 相同 ， 然 而 当 JavaScript 被 禁用 时 ，IE 6 便 无 法 识别 属性 选择 谷 ， 因 此 它 将 冤 
全 名 上 略 以 上 两 条 规则 ， 也 就 避免 产生 额外 的 内 边 距 或 其 他 因此 而 增加 的 样式 。 





说 明 至 此 为 止 的 所 有 修改 都 在 selectors 2.html ARE, 它 在 你 所 下 载 的 本 章 的 示例 文件 之 中 。 


2. 使 用 JavaScript 库 

除了 已 经 成 功 使 用 的 TE 7 脚本 之 外 , 我 们 还 有 另外 的 备 选 方案 , 即 选用 内 置 已 兼容 了 属性 选 
Ear JavaScript 库 或 框架 ， 然 后 在 你 的 代码 中 引入 它们 并 完成 起 要 的 效 朱 。 本 方案 的 缺点 是 它 
不 会 使 你 已 经 编写 好 的 CSS 代码 目 行 生效 ， 需 要 编写 脚本 来 重新 实现 相同 的 效 末 。 然 而 ， 假 如 
你 已 经 编写 了 一 段 脚 本 来 实现 页 面 中 的 某 些 效 末 ,那么 更 好 的 方案 便 是 为 其 附 上 选择 藻 ， 而 不 是 
加 载 TE 7 WAS HE SKLAR A 

“Selecting and Styling External Links, PDFs, PPTs, and other links by file extension using jQuery” 
(使 用 jQuery 根据 文件 后 绥 来 选取 并 定义 外 链 、PDF、PPT 和 其 他 链接 的 样式 ) (http://dabrook. 
org/blog/articles/selecting-and-styling-external-links-or-pdf-ppts-and-other-files -by-extensi) 一 文 用 示 
例 介 绍 了 如 何 使 用 jQuery PREE a ERR R. KEREM JavaScript 库 ， 比 如 
jQuery 和 MooTools， 都 内 置 了 选择 磊 功 能 ， 而 且 还 有 少数 库 专 攻 选 择 右 这 一 功能 ， 它 们 包括 ; 

Q YUI Selector Utility (http://developer.yahoo.com/yul/selector); 

Q Sizzle (http://sizzlejs.com) ; 

Q Sly (http://github.com/digitarald/sly) , 

LAERE SES JavaScript 库 所 包含 的 选择 絮 功 能 帮助 你 省 掉 重 新 编写 脚本 的 工作 一 一 
它们 直接 探测 你 在 CSS 中 已经 编写 好 的 选择 各 ， 然 后 使 之 生效 。 我 们 在 第 1 革 介 绍 过 的 由 Keith 
Clark 编写 的 Selectivizr 脚本 (http://selectivizr.com) 是 一 个 不 错 的 选择 。 先 将 该 脚本 直接 引入 到 
你 的 页 面 中 , 再 从 7 个 JavaScript 库 中 选择 一 个 5| 入 , 这样 一 来 属性 磷 择 絮 就 能 够 在 IE 上 工作 了 。 
如 末 你 正在 使 用 jQuery， 还 有 一 个 选择 便 是 使 用 名 为 SuperSelectors 的 插件 (http://github.com/ 


chrispatterson/jquery-super-selectors ) 。 
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页 面 中 田 一 个 非常 棒 的 应 用 古 使 用 属性 选择 如 分 别 为 照片 和 地 图 缩 略 图 定义 不 同 的 样式 。 如 
RHAFF CSS3 来 实现 这 个 需求 ， 我 们 可 以 简单 地 给 缩 略 图 加 上 一 个 类 ， 并 为 这 个 类 应 用 一 个 独特 
的 样式 。 对 于 本 页 面 来 说 或 许 非 党 容易 实现 ， 但 在 实际 开发 中 使 用 类 并 不 是 最 向 便 的 方法 。 





4.4.1 使 用 类 可 能 遇 到 的 问题 


尽管 类 有 很 多 合理 的 使 用 场景 ， 但 某 些 情形 下 仍然 会 出 现 一 些 问 题 并 影响 我 们 的 使 用 。 

O 类 会 增加 HTML 代码 量 。 在 我 们 的 例子 中 ， 增 加 一 个 类 并 不 会 有 什么 太 大 影响 ， 但 在 那 
些 样式 更 为 复杂 的 页 面 或 网 站 里 ， 大 量 的 类 便 会 大 幅 增 加 文件 尺寸 。 无 论 什 么 时 候 ， 只 
要 你 能 避免 增加 类 或 ID 来 定位 元 素 ， 请 寞 不 犹 瑚 地 选择 其 他 方法 。 

O 页 面 结构 可 能 受 控 于 CMS 或 插件 ， 这 可 能 使 你 无 法 往 页 面 中 增加 类 。 

OQ 你 的 客户 也 是 内 容 的 编辑 之 一 ， 你 不 能 强求 他 去 指定 合适 的 类 。 

O 或 许 你 根本 无 权 编 辑 HTML， 因 为 你 在 项 目 里 担当 着 CSS 开发 者 的 角色 ， 也 可 能 你 的 任 
务 只 是 对 某 个 现 有 项 目的 CSS 进行 一 些 风 格 上 的 更 新 。 

O 增加 类 会 化 费 大 量 的 时 间 ， 假 如 你 正 准备 给 一 个 拥有 许多 页 面 的 网 站 增加 一 些 新 样式 。 
更 简单 的 方法 是 利用 现 有 的 HTML 编写 CSS， 而 不 是 为 了 新 增 样 式 修改 页 面 的 结构 。 








容错 措施 
尽管 页 面 的 开发 者 有 可 能 会 将 图 片 放 错 文件 夹 ,但 相 较 之 下 我 倒 觉 得 某 个 客户 把 类 名 称 写 
错 的 可 能 性 会 更 大 。 如 果 你 想 为 此 增加 一 层 额 外 的 保障 ,可 以 为 其 多 指定 一 个 类 ， 然 后 为 这 个 
类 和 属性 选择 器 同时 指定 相同 的 样式 。 这 样 一 来 ， 如果 某 个 人 忘记 指定 类 ，, 则 属性 选择 器 就 会 
生效 ; 而 假如 另 一 个 人 将 文件 放 错 了 地 方 ， 那 么 类 的 样式 就 会 发 生 作 用 。 这 属于 额外 的 工作 ， 
加 却 是 一 种 保障 措施 ， 当 你 忘记 属性 或 类 中 任意 一 个 时 便 会 自动 纠正 错误 。 而 且 ， 当 你 忘记 为 
IE 6 使 用 兼容 脚本 时 ， 类 也 会 有 其 功用 。 
如 果 你 将 一 个 类 选择 器 和 一 个 属性 选择 器 分 组 到 一 起 ， 请 注意 IE 6 将 会 忽略 整 条 规则 ， 
其 至 它 理应 读 取 并 使 用 类 选择 器 的 那 部 分 样式 〈 当 然 ， 如 果 你 用 脚本 为 IE 6 增加 了 对 属性 选 
择 器 的 支持 ， 则 无 此 问题 )。 为 了 解决 这 个 问题 ， 你 必须 将 规则 分 开 书 号， 就 像 这 样 : 
img I sre*sthumonails] <4 
EloOats lefte 
margins 0 20px 10px 0; 
EN { 


[loaut Leit; 
margins 0 20px 10px 0; 
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代码 存在 宛 余 ,但 如 果 你 不 希望 借助 脚本 就 能 兼容 IE6, 那么 这 是 你 唯一 的 选择 。 然 而 我 
们 不 会 在 示例 文件 里 这 样 做 , 并 不 是 仅仅 因为 我 们 使 用 了 脚本 实现 兼容 , 而 是 因为 我 们 用 属性 
选择 器 实现 了 并 不 重要 的 装饰 性 效果 ， 我 认为 IE 6 丢失 这 些 效 果 也 无 伤 大 雅 。 但 如 果 你 要 用 
它 实 现 更 重要 的 效果 ， 或 是 用 来 提供 容错 ， 那 么 上 面 的 方案 可 供 你 选择 。 


属性 选择 器 的 来 龙 去 脉 
性 选择 器 是 选择 器 (Selector) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/tr/css3-selectors 
找到 它 。 以 下 是 7 个 属性 选择 器 。 
[attr] 匹 配 拥 有 attr 属性 的 元 素 ， 与 属性 的 取 值 无 关 。 
[attr=val] 匹 配 拥有 attr 属性 的 元 素 ， 其 属性 值 必 须 刚 好 等 于 val, 
[attr~=val] 匹 配 拥 有 attr 属性 的 元 素 , 其 属性 值 是 用 空格 分 隔 开 来 的 单词 列表 ,其 
中 之 一 必须 刚好 等 于 val。 

Q [attr|=val] 匹 配 拥 有 attr 属性 的 元 素 ， 其 属性 值 必 须 刚 好 等 于 val, RAV val 开始 
并 紧 跟 着 一 个 连 字 符 。 

Q [attr^=val] 匹 配 拥 有 attr 属性 的 元 素 ， 其 属性 值 必 须 以 val 开始 。 

Q [attrSs=val] 匹 配 拥 有 attr 属性 的 元 素 ， 其 属性 值 ,从 须 以 val BER, 

Q [attr*=val] 匹 配 拥 有 attr 属性 的 元 素 ， 其 属性 值 作 须 包 念 val, 

前 4 个 是 CSS 2.1 的 一 部 分 , 被 称 为 属性 存在 性 及 值 (匹配 ) 选择 器 (Attribute Presence and 
Value Selectors); 后 3 个 则 被 称 为 子 (FA) 串 匹 配属 性 选择 器 (Substring Matching Attribute 
Selectors), Æ F CSS3。 

属性 选择 器 里 的 值 可 以 是 标识 符 或 字符 串 ， 学 符 事 必须 用 引号 括 起 来 。 

属性 选择 器 的 特征 与 类 和 伪 类 选择 器 的 特征 相同 。 

除了 链接 图 标 和 文件 类 型 图 片 等 需求 以 外 ， 你 还 可 以 将 属性 选择 器 用 在 以 下 场景 。 

口 为 不 同 的 表单 域 设 置 独特 的 样式 (比如 使 用 input[type-submit]), 请 和 参阅 http:// 
dev.opera.com/ articles/view/styling-forms-with-attribute-selectors , 

O 为 不 同 的 语言 指定 不 同样 式 (比如 使 用 [lang|=en])。 

O AAA title 属性 的 元 素 增加 视觉 提示 (使 用 [title])。， 

O 为 导航 型 div 元 素 里 的 列表 隐藏 “小 圆 点 ”(Bullet) (比如 用 div[id*=nav] E BG 
nr 

口 为 电子 邮件 链接 指定 样式 (使 用 a[href^=mailto])， 请 和 参阅 http://css-tricks.com/ 
better-email-links-featuring-css-attribute-selectors , 

O 为 站 外 链接 (使 用 a[href^=http]fe a[rel=external])、 安 全 协议 链接 (使 用 a 
[href^=https])、 特 殊 网 站 的 链接 (比如 使 用 a[href*-"paypal.com"]), #F 
窗口 的 链接 (a[target-" blank"]) 或 回 到 本 站 首页 的 链接 (使 用 alhref= 
"http://myurl.com"] AQ a[href-"/index.htm1"]) AA)F eK EA, 


C DO DO c m 
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O 网 站 上 线 前 进行 空 链接 检查 ， 请 参阅 http://fuelyourcoding.com/unconventional-css3- 
link-checking , 

四 大 BRR UF a:after{ content:'[' attr(accesskey) ']' }), 

O Jj blockquote FEL] ee { content: 
sl atte (entey, Po 

O 根据 blockquote 标签 的 不 同 cite 属性 值 而 为 其 设置 不 同 的 样式 。 

口 把 图 片 的 替代 文字 (Alternative Text) 作为 标题 显示 (使 用 img[alt]:after (content: 
IE 

口 编写 一 个 用 户 样 式 表 单 来 隐藏 网 页 广告 ， 请 参阅 http://24ways.ore/2005/the-attribute- 
selector-for-fun-and-no-ad-profit, 

O 为 IE 6 隐藏 菜 些 样式 规则 。 


表 4-3 ”属性 选择 器 的 浏览 器 支持 度 
IE Firefox Opera Safaril Chrome 
XB. 支持 支持 支持 支持 
*IE 7 及 其 之 后 版 本 支持 所 有 的 属性 选择 姻 ， 但 有 时 候 会 出 现 同 题 。 请 仔细 视 试 。 


44.2 ”使 用 属性 选择 器 按 类 型 定位 元 素 


既然 出 页 上 的 照片 和 缩 略 图 拥有 众所周知 的 不 同 之 处 , 我 们 便 可 以 利用 属性 选择 融 来 应 对 这 
些 差异 。 在 我 们 的 例子 中 ,差异 在 于 地 图 的 缩 略 图 存放 于 名 为 “thumbnails” 的 目录， 而 照片 则 
在 “photos” 目 录 下 。 目 录 名 是 src 属性 值 的 一 部 分 ， 因 此 我 们 可 以 使 用 属性 选择 右 根 据 src 
值 的 差异 而 分 别 对 竺 不 同 的 图 片 类 型 。 

让 我 们 先 把 地 图 缩 略 图 从 布 序 动 到 左边 : 


imgdglsre*tethumbnails] { 
float: left; 
margin: 0 20px 10px 0; 








Ti * AY PERE PE ae E URDU ML arZ. RIA src 属性 值 包 售 ‘thumbnails’ FRIR” . 
这 条 规则 会 匹配 到 地 图 的 缩 略 图 : 


<img srcz"thumbnails/map.png" width="100" height="100" 
alt=""> 


| ` 
2 -— . 
D Itinerary 


The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London 
on June 3. We rented a car for the entire non-London portion of our trip, so we were able to explore around 
quite a bit. You can download the documents listed below to get an overview of where we went and what we did 


each day. 





DOWNLOAD: j-|Itinerary (PDF) M|Itinerary(Word) | Map of trip locations (PDF) 
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4-4 地 图 缩 略 图 现在 浮动 到 无 侧 了 ， 而 其 他 图 片 还 是 在 右 侧 
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说 明 box-shadow 属性 值 里 的 -4px 是 阴影 的 扩展 半径 ,iOS 3 及 之 前 版 本 上 的 Safari4 不 支持 
这 个 特性 ， 因 此 在 这 些 浏览 器 上 将 没有 阴影 效果 。 你 可 以 移 除 扩展 半径 的 值 来 修正 这 个 
问题 ， 但 这 样 一 来 又 会 使 阴影 在 Safaris 和 Chrome 上 的 效果 打折 . 这 里 的 权衡 靠 你 自己 。 


现在 让 我 们 给 照片 增加 一 些 样式 让 它们 看 起 来 像 古 宝丽来 照片 。 请 增加 以 下 的 新 样式 规则 : 
img[src*=photos] 1 
padding: 5px 5px 30px 5px; 
background: #fff; 
-moz-box-shadow: 3px 6px 8px -4px #999; 
-webkit-box-shadow: 3px 6px 8px -4px #999; 
box-shadow: 3px 6px 8px -4px #999; 
-moz-transrtorm: rotate(2deg);:; 
-o-transform: rotate(2deg); 
-webkit-transform: rotate(2deg); 
transform: rotate(2deg); 


} 


至 此 所 有 的 照片 四 周 都 有 了 白色 的 边框 , 后 面 则 有 阴影 效果 , 并 旋转 了 一 些 角 度 ( 见 图 4-5), 
© Derbyshine 


We visited Derbyshire on the first three days of our trip. We stayed at a 
B&B called Bassett Wood Farm in the little village of Tissington, where the 
annual well dressing happened to be occuring at the same time. The 
landscape of Derbyshire was gorgeous; I can see why Elizabeth Bennet was 
so impressed. My highlights were visiting the two houses used for 
Pemberley in the Pride & Prejudice mini-series. I even got to see the little 








pond where Colin Firth's famous wet shirt scene occurs. 


DOWNLOAD: [B Cary riding a horse for the first time (MOV) 
(Bl Zoe at Lyme Park 
Œ| Cary and Zoe in Dovedale Valley 
| Zoe at Sudbury Hall 


Colweolds 


The next seven days were spent traveling all around the Cotswolds and the 
surrounding area. We stayed at a cottage in the famously picturesque 
village of Bibury. We explored more than a dozen other Cotswolds 
villages. 


6666666666666666 


One of our favorite towns in the Cotswolds was Cirencester, because of the 
great food we had there and the Corinium Museum. The collection of 
Roman (and earlier) artifacts at the museum was much larger than we 
expected and quite fascinating. 





The more ancient something is, the better Cary loves it, especially if it's all 
in ruins. So, Cary's highlights in the Cotswolds were not just the Roman 
museum but also the unearthed Chedworth Roman Villa and the ruins of 
Minster Lovell Hall. One of our favorite memories from the area was our wet, cold trek to the Belas Knap burial mound, built 
around 2500 BC. Drying out and warming up in the pub afterwards was lovely, and the whole thing was just so English. 


4-5 ”照片 现在 有 了 自己 独特 的 效果 一 一 宝丽来 风格 





45 大功告成 
至 此 我 们 对 页 面 里 的 链接 和 图 片 完成 了 所 有 的 样式 定义 。 请 在 浏览 器 上 检查 我 们 的 工作 成 果 ， 


134 RAF 根据 类 型 为 图 片 和 链接 定义 样式 


并 对 比 图 4-6 和 图 4-1, 三 7 及 其 之 后 的 版 本 支持 属性 选择 器 ,我 们 为 IE 6 加 载 了 一 个 脚本 来 实现 
兼容 ， 因 此 所 作 的 大 多 数 修改 在 下 上 均 是 可 见 的 。 唯 一 不 可 见 的 是 阴影 和 照片 的 旋转 效果 ， 


说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 selectors final.html 页 面 里 ， 它 在 你 下 载 的 本 


+ = : 

章 示例 文件 中 。 
: e 
B 
. Trip 2007 - 
O 
-9 In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip 
* to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
D Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 
ba The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
- Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 
9 : 
o Jinna 
m The trip began on May 19, 2007, when we flew into the Manchester airport. We flew back home from London 
B on June 3. We rented a car for the entire non-London portion of our trip, so we were able to explore around 





quite a bit. You can download the documents listed below to get an overview of where we went and what we did 
each day. 





DOWNLOAD: | Itinerary (PDF) Itinerary (Word) )-| Map of trip locations (PDF) 


We visited Derbyshire on the first three days of our trip. We stayed at a 
B&B called Bassett Wood Farm in the little village of Tissington, where the 
annual well dressing happened to be occuring at the same time. The 
landscape of Derbyshire was gorgeous; I can see why Elizabeth Bennet was 
so impressed. My highlights were visiting the two houses used for 
Pemberley in the Pride & Prejudice mini-series. I even got to see the little 


a 
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pond where Colin Firth's famous wet shirt scene occurs. 


DOWNLOAD: 图 Cary riding a horse for the first time (MOV) 
E| Zoe at Lyme Park 
(8) Cary and Zoe in Dovedale Valley 
(Bl Zoe at Sudbury Hall 


Cotswolds 


The next seven days were spent traveling all around the Cotswolds and the 
surrounding area. We stayed at a cottage in the famously picturesque 
village of Bibury. We explored more than a dozen other Cotswolds 
villages. 


6666666666666666 


One of our favorite towns in the Cotswolds was Cirencester, because of the 
great food we had there and the Corinium Museum. The collection of 
Roman (and earlier) artifacts at the museum was much larger than we 
expected and quite fascinating. 


aoa 


The more ancient something is, the better Cary loves it, especially if it's all 
in ruins. So, Cary's highlights in the Cotswolds were not just the Roman 
museum but also the unearthed Chedworth Roman Villa and the ruins of 
Minster Lovell Hall. One of our favorite memories from the area was our wet, cold trek to the Belas Knap burial mound, built 
€ around 2500 BC. Drying out and warming up in the pub afterwards was lovely, and the whole thing was just so English. 











*€ DOWNLOAD: |M|ZoeandCaryinafieldofsheep [Œ] ZoeinBibury [Œ] Cary at Minster Lovell Hall 


图 4-6 感谢 CSS3， 它 让 我 们 完成 的 版 页 面 拥 有 独特 的 样式 ( 男 见 彩 插图 4-6) 
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前 一 革 里 ， 你 已 经 学 会 了 如 何在 不 增加 ID BOSSA TERE MEH De PETE di oe XE LAT Ye BY 
链接 和 图 片 。 而 在 本 章 中 ， 你 会 学 到 更 多 的 CSS3 选择 器 ， 它 们 能 帮助 你 保持 代码 干净 和 整洁 ， 
而 且 不 依赖 JavaScript 或 Flash, 我 们 将 使 用 这 些 选 择 帮 为 气泡 对 话 框 和 文 草 页 实现 更 多 的 视觉 改 
进 ， 更 妙 的 是 我 们 还 会 添加 CSS 的 动画 和 变形 来 增强 可 用 性 。 


你 将 学 到 
我 们 将 为 气泡 对 话 框 和 文章 页 里 的 照片 增加 交替 样式 ,还 要 为 文章 的 当前 章节 建立 一 份 目 
录 ， 这 会 用 到 以 下 的 CSS3 特性 。 
使 用 :nth-child() 伪 类 选取 可 替代 元 素 。 
使 用 :nth-of-type() 伪 类 选取 某 个 类 型 的 可 替代 元 素 。 
使 用 :last-child 伪 类 为 列表 的 最 后 一 个 元 素 定义 不 同 的 样式 。 
使 用 :target 伪 类 来 选取 含有 可 扩展 片段 标识 符 (Fragment Identifier) 的 URL 的 元 素 。 
使 用 变形 (Transition) 来 平缓 地 更 改 某 个 属性 的 值 。 
使 用 动画 (Animation) 来 掌控 更 复杂 的 视觉 变化 。 


加 回声 COO ODO 


5.1 不 使 用 ID 和 类 来 定位 特定 元 素 


正如 属性 选择 帮 的 功能 一 样 ， 伪 类 和 伪 元 素 能 在 不 指定 ID 和 类 的 情况 下 用 来 选取 特定 的 元 
素 ， 还 可 以 保持 结构 的 整洁 。 伪 类 和 伪 元 素 可 以 将 一 段 并 不 存在 的 HTML 当 作 独立 元 素来 定位 ， 
或 是 找到 那些 无 法 使 用 其 他 人 简单 选择 如 就 能 定位 到 的 切实 存在 的 独特 元 素 。 比 如 ， 你 可 以 使 
HH: first-line 伪 元 素 对 茶 个 段落 的 首 行进 行 格式 化 ， 尺 管 它 并 没有 被 茶 个 HTML FERE. 
这 样 看 来 ， 伪 类 和 伪 元 素 比 属性 选择 背 更 为 强大 ， 因 为 它 能 让 你 定位 那些 从 未 拥有 过 ID 或 类 的 
JUR» 

一 般 看 来 ， 伪 类 和 伪 元 素 对 于 CSS3 来 说 并 不 是 什么 新 鲜 或 特别 的 功能 ， 但 CSS3 SJ T A 
于 个 特别 的 伪 类 来 帮助 我 们 更 精确 地 定位 到 文档 的 茶 个 部 分 。 它 们 之 中 的 大 部 分 都 是 结 构 伪 类 


(Structural Pseudo-class ) 。 
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伪 类 和 伪 元 素 的 差异 何在 

最 简单 的 记忆 方式 是 : 伪 类 选取 已 设置 过 类 的 HTML 元 素 ， 而 伪 元 素 选 取 的 压根 就 不 是 
HTML 元 素 。 

CSS 2% 444 1% 43] ::first-line, ::first-letter, ::before fe::after, 
它们 代表 的 是 其 他 HTML 元 素 的 片段 ,而 非 该 元 素 本 身 。 它 们 也 不 属于 文档 树 (Document Tree) 
的 一 部 分 ， 因 此 唯一 可 以 定位 到 它们 的 方式 便 是 使 用 伪 元 素 选 择 器 。 

在 CSS3 的 语法 规范 中 ， 擅 类 以 一 个 冒号 打头 ， 而 伪 元 素 是 两 个 (它们 曾经 都 使 用 一 个 冒 
号 ,而 且 至 今 有 效 ) ,每 个 选择 器 可 以 设置 一 个 伪 元 素 规 则 (比如 #article p::first-line)， 
但 伪 类 则 无 此 限制 。 


5.1.1 新 的 结构 伪 类 


CSS3 5 引入 了 “结构 伪 类 ”的 概念 ， 它 可 以 根据 元 素 在 文档 树 中 的 茶 些 特性 《比如 相对 位 置 ) 
定位 到 它们 。 举 例 来 说 ，: first-child 伪 类 指 加 那些 父 元 素 的 首 个 子 元 素 。 这 个 元 系 征 文档 笛 
中 的 一 个 独立 的 HTML 元 素 ， 但 它 的 特别 之 处 在 于 它 是 党 一 个 ， 而 我 们 希望 能 在 不 增添 类 或 ID 
的 情况 下 就 能 够 选取 到 它 。 

所 有 的 结构 伪 类 都 是 基 于 文档 树 的 ， 它 也 称 作文 档 对 象 模型 (DOM)， 下 面 让 我 们 快速 地 温 
习 一 下 相关 知识 。 文 档 树 (Document Tree) 是 HTML 页 面 的 层级 结构 。 它 由 元 素 、 属 性 和 文本 
组 成 ， 它 们 都 是 一 个 节点 〈Node) 。 文 档 树 包含 有 多 个 层级 是 因为 元 素 间 互相 对 套 〈 见 图 5-1)。 
直接 舱 入 其 他 元 素 的 元 素 被 称 作 那 些 外 部 元 素 的 子 元 素 (Children); ribi E BC EBJARERU A. E 
们 也 成 了 后 代 元 素 (Descendants)。 而 那些 外 部 元 素 被 称 为 父 元 素 (Parents) (一 层 之 上 ) 或 祖先 
7% (Ancestors) (两 层 或 以 上 )。 位 于 相同 藤 套 层级 的 元 素 一 一 换言之 它们 有 共同 的 父 市 点 一 一 
叫做 兄弟 元 素 (Siblings)。 一 个 元 素 可 以 同时 拥有 以 上 部 分 甚至 所 有 的 称 请， 正如 你 可 以 是 某 和 人 
的 孩子 ， 也 同时 是 某 人 的 父 ( 母 ) 杀 ， 这 些 称谓 都 用 来 描述 一 个 元 素 与 男 一 个 元 素 的 关系 所 在 。 

















| Ce 


5-1 一 个 文档 树 示 例 ， 包 含 了 家 和 完 、 后 代 、 父 、 子 和 兄弟 元 素 


5.1]. 不 使 用 ID 和 类 来 定位 特定 元 素 








我 们 已 经 弄 清 了 所 有 的 术语 ,现在 可 以 看 看 有 哪些 可 以 建 并 元素 间 关系 的 方法 了 。 表 5-17 
列 了 全 部 结构 伪 类 。 


表 5-1 结构 伪 类 












































伪 6 i: XR 

“TOOL 选取 文档 的 根 元 素 。 在 HIML 中 ， 始 终 是 指 html 元 素 

sntbe-childgi) 根据 其 父 元 素 的 子 元 素 的 序号 来 选取 元 素 

‘nthe lasct=Child() 与 :nth-child() 相 似 ， 但 计算 序号 的 方式 不 是 从 前 往 后 ， 而 是 从 后 往 前 (倒数 ) 

:nth-of-type() 根据 其 父 元 素 的 子 元 素 的 序号 来 选取 元 素 , 但 只 有 符合 给 定 类 型 (如 p、img 或 其 他 ) 
的 元 素 才 能 参与 排序 

:nth-last-of-type() 与 :nth-of-type() 相 似 , 但 计算 序号 的 方式 不 是 从 前 往 后 ,而 是 从 后 往 前 (倒数 ) 

no 选取 某 个 父 元 素 的 第 一 个 子 元 素 (在 图 5-1 中 ，h1 元 素 便 符合 条 件 ) 

MlagtegBnilg 选取 某 个 父 元 素 的 最 后 一 个 子 元 素 (在 图 5-1 中 ，img 元 素 便 符合 条 件 ) 

:first-of-type 选取 某 个 父 元 素 的 第 一 个 同类 型 兄弟 元 素 〈 在 图 $-1 中 ， 第 一 个 p 元 素 可 以 通过 
Dp:first-of-type 来 选取 ) 

:last-of-type 选取 某 个 父 元 素 的 最 后 一 个 同类 型 兄弟 元 素 

:only-child 选取 某 个 父 元 素 的 唯一 一 个 子 元 素 〈 在 图 $-1 中 ，ul 元 素 便 符 合 条 件 ) 

:only-of-type 选取 某 个 父 元 素 的 唯一 一 个 某 类 型 的 子 元 素 

: empty 选取 没有 子 元 素 或 不 包含 文本 的 元 素 


除了 :first-child 伪 类 是 属于 CSS2.1 之 外 ， 其 他 的 结构 伪 类 都 是 CSS3 的 新 特性 。 它 们 
为 我 们 提供 了 精确 定位 到 元 素 的 新 方式 。 


5.1.2 回归 气泡 对 话 框 : MALS 





我 们 可 以 用 :nth-childa() 伪 类 使 第 2 章 评论 页 里 的 气泡 对 话 框 的 背景 色 实 现 隔行 交替 。 而 
且 我 们 无 需 使 用 类 或 JavaScript, 

1. snth-child() 如何 发 挥 作用 

最 强大 也 最 实用 的 结构 伪 类 之 一 就 是 :nth-child()。 我 已 经 在 上 文中 提 到 它 可 以 根据 其 父 
元 素 的 子 元 素 的 序号 来 选取 元 素 ， 换 句 话 说 ， 它 根据 其 之 前 有 多 少 兄 第 元 素来 选取 元 于 。 

请 在 选择 絮 的 括号 里 填 入 你 想 选 取 的 元 素 的 序号 ， 比如 1i:nth-child(5)。 这 个 选择 各 将 
匹配 某 个 列表 里 的 第 5 个 1i 元 素 。 括号 里 除了 可 以 使 用 数字 之 外 (选择 器 的 参数 ), 你 还 可 以 使 
用 关键 词 odd (奇数 ) 或 even (偶数 ) 来 隔行 选取 元 素 , 比如 第 2.4、6…… 个 。 但 :nth-child() 
的 强大 还 在 于 你 可 以 将 算式 作为 参数 传人 其 中 , 依 此 创造 更 复杂 的 交替 选择 模式 ， 甚 至 可 以 同时 
依 序 选取 某 个 特定 区 域 的 子 元 素 。 算 式 的 语法 是 an+b， 其 中 a 是 需要 你 来 设置 的 循环 的 周期 ， 
n 是 从 0 开始 的 计数 硕 ， 而 b 是 你 想 要 设置 的 偏 移 值 。 以 下 是 一 个 示例 : 

lizsnth-child(3n4+1) 

n HJf& A OFiR, FREE he, Alea ces HEAT DUAD P : 

(G3x0+l=1= 第 1 个 列表 项 
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(3 x1)+1=4= 第 4 个 列表 项 

(3 x2)+1=7= 第 7 个 列表 项 

(3 x 3)+1=10= 10 个 列表 项 

以 此 类 推 ! 

尽管 你 也 可 以 手动 给 第 1、4、7、10 个 列表 项 加 上 类 ， 但 这 样 做 不 仅 耗 时 耗 力 ， 而 且 容 易 被 
遗忘 ， 还 会 增加 页 面 的 尺寸 , 但 最 重要 的 是 一 一 维护 过 程 很 痛 雷 。 如 果 想 在 已 经 存在 的 项 目 中 插 
入 另外 一 个 ,你 将 不 得 不 对 插入 处 之 后 的 项 目 全 部 重新 指定 类 , 因为 它们 的 序号 已 经 全 部 改变 了 。 
用 :nth-child() 伪 类 代替 你 跟踪 序号 的 变化 并 自动 匹配 将 会 更 为 准确 、 高 效 。 

千 万 不 要 因为 数学 计算 而 对 :nth-child() 产 生 抗拒 。 这 里 有 一 些 不 错 的 线 上 工具 ， 你 可 以 
通过 更 改 数值 来 即时 地 查看 它 是 如 何 影 啊 页 面 样式 的 , 这 将 有 助 于 更 好 地 了 解 :nth-child() 的 
作用 。 其 中 我 最 喜爱 的 一 款 工 具 是 http://leaverou.me/demos/nth.html， 开 发 者 是 Lea Verou， 它 不 
仅 可 以 用 来 测试 :nth-childqa()， 还 包括 :nth-last-child()、:nth-of-type() 和 :nth- 
last-of-type(), 

2. 斑马 纹 效果 

:nth-child() 最 常见 的 应 用 之 一 便 是 使 某 个 表格 产生 隔行 变色 的 效果 ,一般 也 称 作 “斑马 
纹 效 果 ”(Zebra Striping) 。 它 往往 不 仅 是 一 种 审美 的 提升 ， 还 能 让 你 更 轻松 地 六 贤 元 长 的 表格 而 
不 至 于 迷失 目前 的 方位 ， 并 因此 使 可 用 性 得 到 改善 。 











说 明 这 里 有 一 份 研究 表明 ， 焉 马 纹 效果 并 没有 你 想象 中 那么 实用 它 的 确 能 改善 效果 ， 只 
是 效果 并 没有 那么 明显 。 需 要 了 解 更 多 信息 请 阅读 Jessica Enders 所 撰 的 “Zebra Striping: 


More Data for the Case" (www.alistapart.com/articles/zebrastripingmoredataforthecase) , 





役 有 :nth-child() 的 话 ， 要 使 表格 拥有 斑马 纹 效 末 ， 必 须 隔 行 增加 一 个 类 ， 通 前 命名 为 
even X alt, 然后 为 这 个 类 设置 一 个 不 同 的 背景 色 。 必 须 手动 增加 这 些 类 , 或 者 用 一 段 JavaScript 
来 帮 你 实现 。 而 这 两 种 方式 都 不 如 :nth-child () 来 得 高 效 。 

你 可 以 用 :nth-child() 算 式 来 实现 斑马 纹 ， 比 如 : 算式 2n 将 匹配 所 有 的 奇数 行 。 而 关键 
ii] even 和 odd 则 是 更 便于 使 用 的 一 条 捷径 。 我 们 将 在 评论 页 里 通过 关键 词 even 来 使 气泡 对 话 
框 产生 隔行 变色 的 效 末 。 

开始 之 前 ， 请 到 www.stunningcss3.com 下载 本 章 的 示例 文件 并 用 编辑 绒 打 开 
alternate start.html 页 面 。 其 CSS 的 定义 包含 在 页 面 head 里 的 一 个 style 元 素 里 。 该 页 面 和 第 2 
曹 的 文件 相同 ， 你 也 可 以 将 第 2 章 的 最 终 页 面 作为 本 草 的 起 始点 。 

现在 ， 所 有 的 气 移 对 话 框 都 是 相同 的 暗 监 色 ( 见 图 5-2)。 改 颜色 的 值 为 hs1a(182,44$, 
76%, .5) 。 既 然 我 们 使 用 了 HSLA 格式 ,那么 将 交替 色调 整 为 一 个 稍 显 不 同 的 颜色 就 相当 人 向 单 了 。 
你 应 该 还 记得 色调 的 取 值 范围 是 0 到 360， 交 谱 从 红色 到 此 色 。 因 此 如 采 你 想 要 使 交替 色 变 得 更 
绿 一 些 ， 可 以 轻松 地 将 色调 值 调 小 一 些 ， 比 如 用 160 来 替换 182。 而 如 采 你 想 让 交替 色 变 得 更 监 ， 
请 调 高 色调 值 ， 比 如 200。 
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Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 





Zoe Gillenwater 
February 28, 2010 


I agree with Zoe. Make it cooler looking. 


Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 10096. 
Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 


Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
http:;//forabeautifulweb.com/blog/about/what does browser testing mean today/ 


Asha Gillenwater 
March 10, 2010 


5-2 ”所 有 评论 拥有 相同 的 监 绿色 背景 


让 我 们 为 交替 色 选 用 更 监 一 些 的 颜色 。 我 将 使 用 210 作为 色调 值 来 使 其 颜色 变化 显得 更 为 明 
显 。 请 在 页 面 的 head 增加 如 下 的 CSS 代码 : 


li:nth-child(even) 
background-color: 


blockquote { 
hsla(210,44%,76%, .5); 
} 


保存 页 
1 条 和 第 


4 面 ， 然 后 用 疝 不 落伍 的 训 览 右 碍 看 效 末 。 你 将 看 到 第 2 条 和 第 4 条 评论 变 监 了 ， 而 第 


3 条 仍 保持 监 绿色 〈 见 图 5-3), 


Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 


Zoe Gillenwater 
February 28, 2010 


£n Iagree with Zoe. Make it cooler looking. 


Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 10096. 
Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 


Faith Mickley 
March 1, 2010 


Ireally enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
http;//forabeautifulweb.com/blog/about/what does browser testing mean today/ 


Asha Gillenwater 
March 10, 2010 


图 5-3 ”偶数 行 的 气泡 对 话 框 的 背景 色 现在 是 烟 监 色 
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这 个 新 的 监 色 看 起 来 与 之 前 蓝 绿 色 的 饱和 度 并 不 相符 , 那么 就 让 我 们 来 提升 它 的 饱和 度 使 它 
变 得 更 亮 一 些 ， 再 稍稍 增加 一 点 亮度 值 来 衬托 黑色 文字 : 
li:nth-child(even) blockquote { 


background-color: hsla(210,70%,82%,.5); 
j 


现在 交替 色 变 成 了 更 亮 一 点 的 瞳 蓝 色 ( 见 图 5-4), HSLA 帮 我 们 更 方便 地 选取 一 个 互补 色 ， 
而 :nth-chila() 使 我 们 更 简单 地 实现 了 气泡 对 话 框 的 颜色 交 杰 。 尽管 像 日 志 评 论 这 样 的 颜色 交 
替 并 没有 如 表格 那 朋 真正 提升 了 可 用 性 ， 但 你 可 以 感受 到 使 用 :nth-chila O 按 规则 选取 元 素 所 
带 来 的 高 效 。 


说 明 完成 版 页 面 所 展示 的 效果 代 历 都 在 alternate final.html 页 面 里 ， 它 在 你 所 下 载 的 本 章 的 示 
BF 


Thanks for posting this article. Lots of good info. The only thing I still don't really understand is why these blog 
comments are so plain. Why don't you apply some CSS3 and jazz them up? 





Zoe Gillenwater 
February 28, 2010 


I agree with Zoe. Make it cooler looking. 





Cary Gillenwater 
March 1, 2010 


This is one of my favorite posts so far. Thanks so much for posting it. I agree 100%. 





Zoe and Cary, I think the comment area is going to look great by the end of the chapter. Just wait and see! 


Faith Mickley 
March 1, 2010 


I really enjoy reading your blog, but what happens when I put a long URL in my comment text, like this one: 
; http;//forabeautifulweb.com/blog/about/what does browser testing mean today/ 


Asha Gillenwater 
March 10, 2010 





5-4 快速 调整 HSLA 值 使 偶数 行 的 对 话 气 泡 框 变 得 更 亮 一 些 


表 5-2 :nth-child() 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 
xd. 9+ 支持 ，3.5+ 支持 支持 支持 
* Opera 支持 :nth-child()， 但 当 页 面 载 入 完成 以 后 ， 用 JavaScript 生成 的 元 素 却 不 会 更 新 样式 。 这 个 问题 可 通过 
增加 一 个 :last-child 声明 来 修复 。 欲 获取 更 多 信息 ， 请 参阅 http://www. quirksmode.org/css/nthchild.html , 
:nth-child() 伪 类 的 来 龙 去 脉 
:nth-child() 伪 类 是 选择 器 (Selector) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/tr/css3 
-selectors 找到 和 它 。 它 是 一 个 结构 伪 类 ， 可 根据 其 父 元 素 的 子 元 素 的 序号 来 选取 元 素 。 
在 :nth-child() 的 参数 里 ,你 可 以 填 入 一 个 数字 (来 选取 特定 序号 的 子 元 素 ) RAB 
odd 和 even (来 隔行 选取 元 素 ， 即 奇数 或 偶数 序号 的 元 素 ) ， 还 可 以 填 入 一 个 语法 为 an+b 的 
算式 〈 来 选取 特定 组 合 的 子 元 素 )。 在 这 个 算式 中 ，a 代表 循环 的 周期 ，b 则 代表 偏 移 值 。 
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a 和 D 均 可 以 是 负数 值 。 而 如 果 a 赋值 为 1, 那么 你 可 以 忽略 它 〈 因 为 1n+3 等 于 n+3)。 如 
JD 赋值 为 0, 或 者 如 果 a 和 上 bb 的 值 相等 , MARTA AB bd (AA 2n+0 Fe 2n+2 AFF 2n), 
欲 获取 更 多 详细 的 信息 ， 请 参阅 http://reference.sitepoint.com/css/understandinenthchildexpressions。 

除了 班 马 纹 效果 以 外 ， 你 还 可 以 将 :nth-child() 用 在 以 下 场景。 
口 使 一 篇 文章 的 头 两 段 (或 更 多 ) 呈现 不 同 的 样式 〈 如 果 仅 针对 头 两 段 ， 可 使 用 -n+2)。 
O 为 Top100 列表 里 的 前 10 个 项 目 使 用 较 大 的 字号 (使 用 -n+10)。 
OQ 随 着 日 志 或 微 博 的 列表 向 下 展现 ， 使 目的 条 目 呈 现 出 较 小 的 字号 或 更 浅 的 颜色 。 
D 营造 一 种 随意 的 界面 (比如 ， 每 三 个 特性 框 便 使 用 一 种 背景 色 ， 每 四 个 则 用 另外 一 个 ， 
以 此 类 推 )。 

口 每 四 个 缩 略 图 便 强 制 换 行 或 改变 外 补丁 的 值 , 以 此 来 实现 一 个 多 行 相册 , 请 参阅 http:/ 
mondaybynoon.com/2010/03/18/css3-center-thumbnail-galleries , 

口 为 表格 里 特定 的 列 定 义 不 同 的 样式 (比如 ， 使 包含 数字 的 第 三 列 靠 右 对 齐 )。 

O 根据 并 排 项 目的 数量 改变 宽度 值 以 撑 满 剩余 空间 ， 请 参阅 http:/andr3.netblog/posU142。 


3. 针对 IE 的 兼容 方案 

IE 8 及 之 前 的 版 本 并 不 支持 :nth-chid()， 而 契 9 已 支持 。 在 本 例 中 颜色 交替 只 是 一 个 很 
小 的 视觉 增强 , TES 及 之 前 版 本 的 用 户 看 不 到 也 无 妨 。IE 将 直接 忽略 我 们 新 增 的 样式 规则 ， 并 依 
旧 的 所 有 气泡 对 话 框 的 原 有 颜色 。 看 起 来 没有 任何 异 遂 、 不 完整 或 丑陋 之 处 。 

要 是 你 仍旧 想 为 IE8 及 之 前 的 版本 提供 一 个 解决 方案 ， 需 要 用 到 JavaScript。 如 采 你 要 实现 斑 
马 纹 效 果 ， 网 上 有 大 量 的 脚本 可 以 帮助 你 隔行 添加 类 。 最 适合 你 的 脚本 还 是 取决 于 项 目 本 里 ， 可 
以 在 Google 里 搜索 “Zebra Stripe JavaScript”, “Zebra Stripe PHP” 或 其 他 更 符合 你 需求 的 关键 词 。 

除了 上 面 的 方式 之 外 ， 你 还 可 以 使 用 一 个 脚本 为 E 增加 高 级 选择 红 的 支持 ， 然 后 使 用 选择 
絮 实 现 你 想 要 的 效果 ,这 当然 包括 但 不 限于 斑马 纹 效 果 。 其 中 一 个 脚本 束 是 我 们 在 上 一 草 所 使 用 
过 的 由 Dean Edwards Ff KAY IE 7.js(http://code.google.com/p/IE 7-js) ,但 这 一 次 你 必须 升级 为 IE9.js 
来 获得 对 伪 类 的 文 持 ， 正 7.js 仅 兼 容 了 属性 选择 匣 和 其 他 少数 选择 奉 。 另 一 个 不 错 的 脚本 也 实现 
了 对 伪 类 的 支持 ， 它 名 叫 Selectivizr (http:/selectivizrcom) ， 不 过 如 我 们 在 第 4 草 中 提 到 的 : 要 
使 它 工 作 ， 还 需要 引入 其 他 某 个 JavaScript 库 ， 比 如 jQuery, MooTools 或 DOMAssistant, PAE 
两 个 脚本 都 使 下 能 够 识别 业已 存在 的 CSS 并 按照 样式 定义 来 演 染 它们 。 

再 次 回顾 第 4 革 我 们 所 提 到 的 ， 很 多 JavaScript 库 内 部 已 文 持 如 :nth-chilq() 这 样 的 选择 
句 ， 你 可 以 将 它 写 入 自己 的 脚本 并 使 其 在 下 上 工作 。 但 这 个 方法 不 会 使 日 前 已 经 定义 的 CSS 代 
码 生 效 ， 你 将 不 得 不 在 脚本 中 重新 定义 。 请 参看 第 4 章 的 “使 用 JavaScript 库 ” 这 一 市 以 获取 可 
供 使 用 的 脚本 库 链 接 。 


5.1.3 回归 照片 : 随机 旋转 


我 们 已 经 用 :nth-child() 改 进 了 气泡 对 话 框 ， 接 下 来 让 我 们 回 到 第 3 章 和 第 4 音 里 我 们 已 
完成 的 文章 页 面 ， 看 看 能 为 照片 增加 什么 样 的 交替 效果 。 现 在 ， 所 有 的 照片 都 已 旋转 过 ， 好 让 它 
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们 看 起 来 更 真实 。 但 由 于 旋转 角度 相同 , 它们 看 起 来 非常 整齐 ( 见 图 5-5)。 要 是 用 :nth-child() 
来 使 不 同 的 照片 旋转 不 同 角 度 并 以 此 来 增强 界面 的 随意 感 和 真实 感应 该 非常 不 错 。 


e 
England Thip 2007 


Ia May and June 2007, Cary asd I spent 15 days traveling around England (ples a very brief detour isto Wales). I1 was our first trip 
to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during oar 
Vermont vacation, but this was our first significant out-of country trip. We had a fatrebous time! 


‘The trip was heavily focused around Jane Austen sites, both those from her lige as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janette, and I have a very usderstanding and loving husband 


The trip began on May 19, 2007, when we Dew into the Manchester airport. We few back home from Loadoa 
on June 3. We remed a car for the entire non-London portion of our trip, so we were able to explore around 
quite a bt. You cas download the documents listed below to get an overview of where we went and what we Gd 
each day. 


DOWNLOAD: 人 Itinerary (PDF) M itinerary (Word) > Mapoftrip locations (PDF) 


We visited Derbyshire on the first three days of our trip. We stayed at a 
BEB called Basset: Wood Farm = the Eye village of Tissiqtoc, where the 
anneal vel) dressing happened to be occuring at the same time. The 
landscape of Derbyshire was gorgeous; ] can see why Elizabeth Bennet was 
so impressed. My highëghts were visiting the two houses used for 
Pemberley in the Pride k Prepadice mr=i seres | even got to see the little 
pond where Colis Firth's famous wet shirt scene occers. 


DOWNLOAD: [B Cary riding a horse foc the firs time (MOV) 


Cotswolds 


The next seven days were spent traveling all around the Cotswolds and the 
sarrounding area. We stayed at a cottage in the famously pscturesque 
village of Bibury. We explored more than a doves other Cotswolds 
villages. 


One of cur favorite towns in the Cotswolds was Cirencester, because of the 
great food we had there and the Conaium Museum. The collection of 
Roman (and earber) artifacts et the museum was moch larger than we 
expected asd quite fascinating. 


The more ancient something is, the better Cary lores it, expecially if it's all 

is reina. So, Cary’s highlights in the Cotewolds were not just the Roman 

museum but also the esearthed Chedworth Romaa Villa and the reins of 

Mizater Lovell Hall. Ose of our favorite memories from the ares was our wet, cold trek to the Belas Knap burial mowad, built 
arcead 2500 BC. Drying out and warming up in the pub afterwards wes lovely, and the whole thing was jest so English. 


DOWNLOAD: W ZotandCaryinafeltofsheep WF Zoria Bibury W Cary at Minster Lowell Hall 


While staying in Bébury, we took a couple trips out of the Cotswolds 
proper. 


One day-trip was to Bath to see the Jane Austen sites aad, of course, the 

Boman Bathe (which are also Jane Austen related, incidentally). On the 

way back from Bath, we stopped at tbe village of Lacock, which was ated 
for Meryton = the Pride & Prejodice mizs-serses (along with a bunch of 

other movies). 


Another day-trip took us into Wales to see the reins of Chepstow Carte. 
This was one of Cary s highlights during the trip. It was very large asd 
quite impressive. Os the way to Wales, we successfully hunted dows the 
private home used for Longbourne House in Pride & Prejudice. 


DOWNLOAD: TIheRomanlada W Ciya Ceptor Castle © Zoe st “Losshourne Home” 


Winchester and Surrounding Area 

We finally had to say goodbye to our cute cottage is Bibery and moved oe 
to Winchester, where we spent two days. On the way, we saw the annual 
Gloucestershire cheese-rolling, which was one of our highlights of not caly 
this trip, but all the trips I've ever tañse So bizarrely fun. 


Winchester was a cool tows that I'd love to spend more time in. The 
Cathedral was beavtiful, and it was so interesting t0 see its mixture of 
architectural styles that happened as it was buit up over the centuries. 1 
visited Jase Austen s grave in the Cathedral, of course, and cried outside 
the house where she died. Yes, I love Jane Austen that mach. 


While staying in Winchester, we took a short jasat down to the New Forest 
to see the wild ponies. 1 am still a 12-year-old girl when it comes to horses, 
and standing ix a Geld among wild ponies, a good portion of which were 
adorable little foals, made me giddy. That same day, Cary was giddy with 
excitement M getting to not only see Stonebenge bet walk among st and 
towch the stones. You have to pay extra for this and reserve it way in 
advance, but it's so worth it. Everyone was so excited to be there, that 
even if yos Edat care much about Stonehenge (Ike me), it was impossible 
to not get caaght up in the excited happiness. 


We visisted Chawton Cottage, where Jane Austen lived for many years and 

wrote most of her novels, on out way out of Wiechester and up to London ]t was amazing to touch the table she wrote on (which 
was against the rules, but I promise 1 didn't hurt it). We also stopped by the village where she was bors and grew ep: we visited the 
Etle church where she was baptised and her father was rector for many years. 


DOWSLOAD: Bi ChemercliegQlOV) M 'ZoeatlantAzxsenizae MM Wild ponies OW Cary fixing Stonehenge 


London 


We spent cur last three days = London iz a cool apartment in Lambeth 
We saw some of the main attractions, but there's no way to squeeze them 
all in in three day»—at least not enjoyably. We had a great time at the 
Tower of London. The British Museum was amazing but we didnt have 
searly enough time there. Cary particularly enjoyed the Cabinet War 
Rooms and Museum. We saw Les Musersbles as well as Othello at the 
Globe, and we ate great food. 


Tbe Jane Austen fuz wasn't done yet though! We saw ber writing desk and 
some of her writings at the British Library, and in the Naitonal Portrait 
Gallery we saw the oaly known portrait of ber. 


Our last fell duy in England June 2, was cur wedding ansiversary. We had 
a lovely dinser ot a Torkish restaorant called Ey, sitting out on their lovely plazt-decked patio on a mid summer evenizg. 


DOWNLOAD: W Parliamentand Dicken W ZoeinSnLlunmeiGane Bi 
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然而 ， 当 你 使 用 img [src*=photos] :nth-child(even) 选 择 器 使 所 有 偶数 号 的 图 片 改 向 
左旋 转 的 时 候 ， 你 可 能 会 尺 证 地 发 现 最 后 两 个 图 请 却 都 癌 右 转 了 ， 并 没有 实现 交替 。 这 和 是 因 
为 :nth-child() 伪 类 仅 选 择 拥 有 相同 父 元 素 的 所 有 子 元 素 。 这 些 img 元 素 与 所 有 的 p 和 nh2 是 
兄弟 元 素 ， 因此 全 部 这 些 元 素 都 被 :nth-child() 选 取 到 了 。 尽 管 选 择 器 中 包含 了 img 元 素 , 但 
那个 选择 絮 要 求 的 是 “找到 所 有 src 属性 包含 “photos” 字 样 的 图 片 ， 然 后 对 那些 偶数 号 的 子 元 
素 应 用 指定 的 样式 ”。 如 果 你 计算 过 div 下 img. p 和 h2 元 素 的 个 数 ， 会 发 现 倒数 第 二 张 照片 
是 div 的 第 29 个 子 元 素 ， 而 最 后 一 张 照片 位 列 第 37。 因 此 ,， 那 条 :nth-chilq() 规 则 只 选取 偶 
数 号 的 子 元 素 ， 而 不 会 对 它 俩 应 用 样式 ， 所 以 它们 依旧 癌 右 旋转 。 

我 们 真正 需要 的 选择 器 必须 与 :nth-chi1ld() 相 似 , 但 它 必 须 上 只 计算 特定 类 型 的 元 素 。 幸 运 
的 是 ，CSS3 早已 提供 了 这 样 的 选择 器 一 一 :nth-of-type() 伪 类 。 它 的 功能 与 :nth-child() 
相同 ， 但 仅 将 写 在 它 前 面 的 元 素 纳 入 计数 。 

让 我 们 将 它 应 用 到 页 面 里 。 请 从 本 章 的 示例 文件 里 找到 并 打开 rotate_start.html (或 直接 使 用 
第 4 章 的 完成 页 面 )。 在 页 面 head 里 增加 如 下 新 样式 : 


img[src*-photos]:nth-of-type(even) { 





-moz-transform: rotate(-2deg) ; 
-o-transform: rotate(-2deg); 
-webkit-transform: rotate(-2deg); 
transform: rotate(-2deg); 


} 


保存 你 的 页 面 ,然后 在 浏览 器 中 查看 是 否 每 个 偶数 号 的 图 片 都 改 辐 左旋 转 了 ( 见 图 5-6), 3x 
一 次 最 后 两 张 图 没有 倒 疝 同一 边 ， 而 是 分 别 朝 不 同 的 方向 旋转 。 

你 可 能 注意 到 图 5-6 里 第 1、3 和 5 号 图 片 都 问 左 旋转 了 ， 尽 管 选择 器 的 要 求 是 偶数 号 的 图 
片 才 癌 左 转 。 这 是 因为 页 面 里 所 有 照片 之 前 还 有 男 一 个 img 元 素 一 一 地 图 的 缩 略 图 。 它 的 img 
标签 使 第 1、3 和 5 号 照片 成 了 总 数 上 的 第 2、4 和 6 号 图 片 。:nth-of-type() 伪 类 在 计算 元 素 
个 数 时 仅 关心 其 类 型 一 一 在 本 例 中 ,元 素 类 型 指 的 是 img。 整 条 选择 器 的 意思 是 “找到 所 有 src 
属性 包含 “photos ”字样 的 图 片 ， 然 后 对 那些 偶数 号 的 img 元 素 应 用 指定 的 样式 ”。 














:nth-of-type() 的 威力 
如 果 你 想 知 道 :nth-of-type() (或 其 他 一 些 高 级 选择 器 ) 的 真正 威力 ， 请 访问 Harry 
Roberts 没 用 任何 ID 或 类 就 实现 的 一 个 多 列 布局 的 示例 页 面 (http://csswizardry.com/2010/04/ 
building- sites-without-using-ids-or-classes) 。 所 有 的 div 都 改 用 高 级 选择 器 来 定位 。 它 并 未 展现 
什么 特效 ， 只 是 一 种 页 面 实现 的 可 能 性 和 一 份 选择 器 的 学 习 范 例 。 
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看 起 来 更 真实 了 
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:nth-of-type() 伪 类 的 来 龙 去 脉 
:nth-of-type() 伪 类 是 选择 器 (Selector) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/tr/css3- 
selectors 找到 它 。 筷 是 一 个 结构 伪 类 ， 可 根据 其 父 元 素 下 同类 型 子 元 素 的 序号 来 选取 元 素 。 它 
接受 的 参数 〈 填 入 括号 ) 与 :nth-child() 一 样 。 
除了 旋转 图 片 的 需求 以 外 ， 你 还 可 以 将 :nth-of-type() 用 在 以 下 场景 。 
口 营造 一 种 有 随意 感 的 界面 ， 效 果 不 仅仅 是 实现 旋转 。 
O 使 文章 中 的 图 片 交 替 着 向 左 或 向 右 浮 动 。 
Q 为 一 篇 文章 的 头 一 段 或 几 段 指定 不 同 的 样式 ; 如 果 有 其 他 元 素 可 能 会 使 这 些 段 落 的 序 
号 变 得 靠 后 (比如 有 了 时 h2 或 img 会 处 于 段落 之 前 ) ， 这 种 情况 下 :nth-child() 将 不 
Zr de TR ER JR 
口 为 一 个 定义 列表 的 条 目 使 用 交替 样式 ; 由 于 每 个 dt 可 以 对 应 一 个 或 多 个 dd LH, Ap 
ZN 
口 为 文章 中 的 blockquote LX SX LERRA, 


说 明 下 对 :nth-of-type() 的 支持 情况 与 :nth-child() 相 同 , 而且 JavaScript 的 兼容 方案 也 
一 样 


说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 rotate final.html 页 面 里 ， 它 在 你 所 下 载 的 本 章 的 示例 


文件 之 中 。 
表 5-3 :nth-of-type() 的 浏览 器 文 持 度 
IE Firefox Opera Safari Chrome 
支持 ，9+ 支持 ，3.5+ 支持 支持 支持 





* Opera 对 :nth-of-type() 和 :nth-child() 的 支持 有 相同 的 问题 。 


CSS3 中 并 无 方法 可 以 让 阐 览 右 计 算 只 拥有 特定 属性 的 imo 元 素 。 所 有 其 他 的 img TRABA 
是 片 一 起 参与 子 元 素 的 计数 和 排序 。 在 本 例 的 页 面 中 , 我们 仅仅 答 试 使 照 族 看 起 来 随意 一 些 ， 
此 有 其 他 图 片 扰乱 了 我 们 的 设想 其 实 并 非 坏 事 。:nth-of-type() 伪 类 仍旧 按 计划 发 挥 了 作用 ， 
就 算 它 并 未 依据 我 们 的 设想 选取 元 素 。 

事实 上 ， 可 以 利用 男 一 条 :nth-of-type() 规 则 来 获得 更 随机 的 照片 展 现 . 


img[src*-photos]:nth-of-type(3n) { 
-moz-transform: rotate(ldeg); 
-o-transform: rotate(ldeg) ; 
-webkit-transform: rotate(ldeg); 
transform: rotate (| Ldeg) + 
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这 会 使 每 三 个 图 片 的 角度 便 疝 右 调 整 一 度 。 现 在 照片 的 旋转 效 末 至 现 出 一 副 更 随意 的 样子 
T: 第 1 张 负 回旋 转 -29eg， 第 2 张 旋转 1qeg， 第 3 张 负 回旋 转 -2qeg， 第 4 张 29eg， 而 第 5 
张 则 是 1qeg (WA 5-7), 
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图 5-7 旋转 变 得 更 多 样 化 了 ， 看 起 来 更 随意 、 真 实 


即使 是 :nth-of-type() 也 可 能 无 法 满足 你 的 所 有 要 求 ,但 它 仍 旧 为 你 提供 了 不 使 用 类 和 ID 
便 能 定位 到 元 素 的 大 量 方法 。 
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9.2 动态 高 党 显示 页 1 面 的 区 域 


你 已 经 看 到 过 两 个 例子 ， 它 们 为 你 展示 了 如 来 使 用 CSS3 的 结构 伪 类 在 不 使 用 类 和 ID 还 有 
JavaScript 的 情况 下 使 页 面 的 视觉 效果 得 到 提升 。 其 他 CSS3 的 伪 类 还 能 为 你 的 页 面 增添 更 多 的 动 
SAUR, 比如 当 你 :所 击 页 内 链接 后 聚焦 于 页 面 下 方 共处 时 当前 的 区 块 会 高 亮 诗 现 。 这 不 仅仅 古 视 
效 末 的 提升 ， 还 息 对 可 用 性 的 改 画 ， 因 为 它 帮 助 济 览 者 找到 他 们 在 页 面 中 的 停留 位 置 。 

举例 来 讲 ， 当 你 点 击 维基 百科 里 其 篇 文章 的 引文 编号 时 ， 页 面 会 同 下 跳 转 到 页 面 末尾 与 之 相 
应 的 注释 处 。 维 基 百 科 会 高 之 显示 你 所 点 击 的 那 条 注释 ,因此 就 不 必 在 可 能 存在 的 成 百 上 千 个 注 
释 里 找到 与 之 对 应 的 那 一 条 CULE 5-8)。 


vo 


We 
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窗口 项 部 时 ， 上 述 方法 特别 管用 。 
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:target 伪 类 


一 些 URL 拥有 片段 标识 符 (Fragment Identifier), 
而 成 可 以 链接 到 页 面 的 某 个 
这 个 地 址 就 属于 谤 


ZIM 





维基 百科 使 用 :target 伪 类 将 所 选 脚注 高 亮 显 示 为 蓝 色 


你 当然 也 可 以 使 用 JavaScript 来 高 亮 所 选 的 脚注 、 
的 :target 伪 类 将 更 为 高 效 ， 不 仅 节 省 了 开发 时 间 ， 还 缩短 了 页 面 的 读 取 时 间 。 


标题 或 其 他 页 面 区域 ， 但 是 用 CSS3 


它 由 一 个 井 号 后 跟 一 个 销 点 或 元 素 ID 组合 
PIE JUSS. 图 5-8 中 http://en. We es austenZcite note-21 


:target 伪 类 选取 链接 的 目标 元 素 ， 然 


供 你 定义 样式 。 
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在 维基 百科 上 ， 当 你 点 击 脚注 序号 ， 与 之 对 应 的 脚注 的 1i 元 系 便 被 选取 。 以 下 古 维 基 百 科 
为 目标 脚注 定义 的 样式 : 


ol.references > li:target, sup.reference:target, span.citation:target { 








background-color: #DEF; 
} 


我 们 也 可 以 用 :target 伪 类 来 为 你 的 文章 页 面 实现 相似 的 效 末 。 
5.2.2 增加 目录 


当前 , 文 草 页 面 并 没有 任何 片段 标识 符 来 供 我 们 链接 。 既然 二 级 标题 将 文章 自然 地 分 割 成 划 
市 ， 那 么 让 我 们 先 给 它们 增加 ID, 

如 果 你 完成 了 rotate_start.html 页 面 ,下 面 就 可 以 继续 修改 它 了 , 或 者 你 也 可 以 从 本 章 的 示例 
文件 中 打开 target_start.html, 两 个 页 面 理 应 相同 ,在 你 的 页 面 中 , 请 为 每 个 h2 元 素 增加 id 属性 。 
首先 从 “Derbyshire” 开 始 ， 代 码 如 下 所 示 : 


<h2 id="derbyshire">Derbyshire</h2> 

<h2 id="cotswolds">Cotswolds</h2> 

<h2 id="daytrips">Day-trips from the Cotswolds</h2> 

<h2 id="winchester">Winchester and Surrounding Area</h2> 
<h2 id="lLondon">London</h2> 


现在 在 页 面 的 顶部 增加 目录 链接 到 这 些 n2 元 素 。 请 在 “Itinerary 这 个 h2 元 系 前 增加 如 下 
列表 : 


<ul id="toc"> 





<li><a href="#derbyshire">Derbyshire</a></li> 
li><a href="#cotswolds">Cotswolds</a></li> 
li><a href="#daytrips">Day Trips from the Cotswolds 


< 
< 
"</a></11i> 
21 
z 
< 





li><a href="#winchester">Winchester and Surrounding 
Area</a></li> 





li><a href="#london">London</a></li> 
</ul> 


DEAE VUE. AEEA AL A GE. Ae HA BE ey RT BI e AA Be el 
处 。 我 们 还 未 给 当前 的 二 级 标题 增加 任何 特殊 样式 ,但 在 做 这 一 步 之 前 ， 我们 需要 给 目 东 加 上 
FEX. 








说 明 至 此 为 止 的 所 有 修改 都 在 target_1.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 文件 之 中 。 


1. 为 目录 定义 样式 
目录 列表 已 经 有 一 些 非 标准 的 样式 了， 因为 页 面 里 早已 存在 ul 和 a 元 素 的 样式 规则 ， 目 录 
里 的 链接 排列 成 一 行 ， 由 空格 将 彼此 分 隔 开 来 (ILES 5-9)。 让 我 们 来 进一步 改进 这 个 样式 。 
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England Trip. 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip 
to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 
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Derbyshire Cotswolds Dav Trips from the Cotswolds Ninchester and Surrounding Area London 














9 
9 
O 
"- 
9 
-O 
9 
9 
全 
9 


图 5-9 REEM EER H oe 
先 为 列表 增加 一 个 手 给 前 头 的 育 景 图 : 


#toc { 
background: url(images/arrow.gif) no-repeat top right; 
padding-top: 1.6em; 

} 


fe POR, 去掉 1i 和 a 元素 的 左 内 边 距 值 ， 改 用 右 内 边 距 ， 这 样 列 表 整 体 都 问 左 对 齐 了 : 


#toc li { 
padding: 0 1.2em 0 0; 
} 
#toc a ( 
padding-left: 0; 
j 


这 里 是 使 用 另 一 个 CSS3 伪 类 的 好 机 会 。: last-chila 伪 类 可 以 帮助 你 给 某 个 父 元 素 
的 最 末 一 个 子 元 素 指 定 特别 的 样式 。 在 这 里 ,我 们 可 以 用 它 来 去 掉 列 表 最 后 一 个 项 目的 右 内 
边 距 : 


#toc li:last-child { B 


padding-right: 0; 








} 

X E Dp AN ERES VALL EB SS E — 1 34 HAI I), 减少 它 在 非 必 须 的 情形 下 折 到 第 
二 行 的 几率 。: last -chilgd 伪 类 在 移 除 某 个 列表 、div 或 表格 列 的 最 后 一 个 项 目的 内 边 距 、 外 补 
丁 、 边 框 或 其 他 样式 时 显得 非 第 实用 。 

图 5-10 展示 了 目前 我 们 所 定义 的 样式 。 列 表 看 起 来 好 多 了 ， 但 还 是 显得 太 过 单调 。 如 来 为 
每 个 列表 项 目 增 加 一 个 小 图 标 或 数字 ， 又 将 如 何 ? 
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5-10 ”目录 现在 有 了 背景 图 ， 链 接 也 有 了 更 好 的 间距 值 
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2. 用 纯 CSS 实现 数字 “图 标 ” 

为 了 在 列表 项 之 前 加 上 数字 序号 ， 我 们 可 以 用 有 序列 表 (01 元 素 ) 来 代替 无 序列 表 (ul 元 
素 )。 但 是 我 们 无 法 直接 为 浏览 禹 增加 的 列表 序号 设置 样式 。 当 然 还 有 一 些 方法 可 以 变相 地 实现 ， 
但 它们 可 以 实现 的 效果 有 限 ， 而 且 会 在 结构 中 增加 垃圾 代码 。 

男 一 套 可 选 方案 则 是 使 用 数字 背景 图 。 但 这 个 方案 也 有 它 的 缺点 一 一 会 给 页 面 增加 5 个 
HTTP 请 求 。 为 了 使 负面 影响 最 小 化 ， 你 可 以 使 用 一 项 名 为 “CSS Sprites” (CSS 精灵 ) 的 技术 ， 
它 能 将 所 有 图 片 合并 为 一 张 , 然后 通过 调整 背景 图 的 位 置 来 为 每 个 列表 项 展示 这 张大 图 的 一 小 部 
分 从 而 实现 我 们 的 需求 。 但 即使 是 用 CSS 精灵 ， 你 也 仍旧 需要 多 增加 一 次 额外 的 HTTP 请 求 ， 
外 加 书写 一 些 繁琐 的 CSS 代码 来 应 用 这 项 技术 。 

除了 使 用 图 片 乙 外 , 我 们 可 以 使 用 内 容 生成 特性 帮 有 我 们 插入 数字 ， 束 像 在 第 2 草 里 已 经 党 试 
过 的 那样 。 但 这 一 次 ， 我 们 将 走 得 更 远 。 我 们 不 会 把 数字 硬 编 码 到 content 属性 里 一 一 因为 这 
样 束 需要 为 五 个 列表 项 书写 五 条 不 同 的 规则 一 一 而 会 使 用 一 项 CSS 2.1 的 特性 ，CSS 计数 如 来 动 
仿生 成 并 自动 实现 数字 的 递增 。 

要 使 用 计数 右 ， 必 须 首先 使 用 counter-reset 属性 来 命名 并 新 建 一 套 计 数 絮 : 


#toc ( 
background: url(images/line.png) no-repeat top right; 
padding-top: 1.6em; 
counter-reset: list; 














KT CSS 精灵 技术 的 更 多 信息 
尽管 CSS3 的 出 现 帮助 我 们 省 掉 了 许多 之 前 用 到 CSS 精灵 的 图 片 ， 但 在 很 多 情况 下 使 用 
CSS 精灵 背景 图 片 技术 仍旧 显得 很 万 便 。 以 下 便 是 更 多 关于 这 项 技术 的 信息 。 
DD “CSS Sprites: What They Are, Why They're Cool, and How To Use Them", 4g% Chris 
Coyier (http://css-tricks.com/css-sprites) , 
O “CSS Sprites Workflow" , 作者 Chris Coyier (http://css-tricks.com/css-sprites-workflow) , 
UO “CSS Sprites: Useful Technique, or Potential Nuisance?”,， 作 者 Louis Lazaris (www. 


smashingmagazine.com/2010/03/26/css-sprites-useful-technique-or-potential-nuisance) , 


以 上 代码 新 建 了 一 套 计数 器 ， 姑 且 命 名 为 “list” ， 现 在 你 就 可 以 把 它 应 用 到 一 系列 元 素 上 了 
(你 也 可 以 在 counter-reset 属性 里 为 计数 器 设置 一 个 起 始 值 ， 默 认 由 0 开始， 由 于 这 正 是 我 
的 需求 ， 因 此 我 没有 在 属性 中 设置 起 始 值 )。 目 录 列 表 里 的 1i 元 素 序 列 便 是 我 们 将 要 应 用 “list” 
计数 絮 的 日 标 。 要 应 用 这 个 计数 姻 ， 我 们 在 #toc 1i 规则 里 使 用 counter-increment 属性 : 


#toc li { 
padding: 0 1.2em 0 0; 
counter-increment: list; 


XX Zt VR Ua OE a PRA ET BE 11 元 素 进行 递增 计数 ， 但 它 并 不 会 将 数字 展示 出 来 ， 这 时 你 
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需要 用 到 content 属性 。 现 在 用 :before 伪 类 建立 一 条 新 规则 以 便 在 每 个 列表 项 的 内 容 之 前 显 
IRAT: 
#toc li:before { 


content: counter (list); 


J 


说 明 请 记 住 ， 要 使 用 计数 器 ， 你 必须 使 用 三 个 不 同 的 属性 : counter-reset, counter- 
increment 和 content。 欲 获取 更 多 关于 计数 器 的 信息 ， 请 参阅 由 David Storey 撰写 的 
“Automatic Numbering with CSS Counters "— X (http://dev.opera.com/articles/view/automatic- 


numbering-with-css-counters) 。 


XX A AS SR bd ak VISA A Ae 47 “list” iiir. AE Za, BF 
PRS te RUE RT FI eH T Bi T. ML FPR, BARRE 1 个 数 COL 5-11), 
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5-11. CSS PCS TE PERR ZA Lo E A Be PS 


我 们 可 以 把 这 些 数 字 当 作 页 面 中 的 其 他 内 容 一 样 来 设置 样式 。 首先, 让 我 们 先 使 它们 和 文字 
发 生 泽 动 并 在 列表 项 之 前 增加 一 点 儿 左 内 边 距 ， 这 样 就 能 保持 它们 在 同一 直线 : 
#toc li:before { 


contents counter (list); 
float: left; 





} 


#toc a { 
float: left; 


padding-left: 5px; 





f£ POR border-radius 属性 给 每 个 数字 增加 一 个 圆圈 背景 ， 使 用 和 链接 相同 的 上 蜡 监 色 ， 
但 半 透 明 化 : 


#toc li:before ( 
content: counter(list); 
float: left; 
width: 1.6em; 
height: 1.6em; 
-moz-border-radius: .8em; 
-webkit-border-radius: .8em; 
border-radius: .8em; 
background: #87B3CE; 
background: hsla(203,78%, 36%, .5); 
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说 明 IE 9 的 确 支持 border-radius 属性 ， 但 看 样子 (在 此 书 撰写 之 时 ) 并 不 适用 于 CSS 生 
成 的 内 容 ， 因 此 在 ]IE9 上 圆圈 将 被 方 框 所 代替 。 


正如 在 第 2 章 题 为 “使 用 border-radius 来 实现 CH) 圆 形 ” 里 所 解释 的 那样 : 你 可 以 将 
块 元 素 的 宽 和 高 设置 为 相同 的 值 (本 例 中 是 1. 6em)， 楼 着 将 b border-radius 属性 的 值 设置 为 


上 述 值 的 


一 半 ( 即 .8em)， 这 样 就 能 绘制 出 一 个 圆 形 。 


从 图 5-12 可 以 看 到 数字 确实 已 经 有 了 圆圈 背景 ， 但 文字 仍旧 需要 针对 圆圈 的 位 置 做 进一步 
的 调整 。 请 为 #toc 1i :before 规则 增加 如 下 新 定义 : 


color: 


#fff; 


font-family: Arial, Helvetica, "Helvetica Neue", 


sans-serif; 


font-weight: bold; 

text-decoration: none; 

text-shadow: 0 1px 0 hsla(0,0%,0%,.6); 
text-align: center; 
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5-12. {# FA border-radius 属性 来 为 数字 增加 圆圈 背景 








现在 数字 就 绝对 看 起 来 像 是 真正 的 图 片 了 ( 见 图 5-13)。 这 样 我 们 就 在 不 依赖 任何 图 片 并 不 
修改 HTML 结构 的 情况 下 实现 了 图 标的 界面 制作 。 
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England Trip 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip 
to Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 
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5-13 ”借助 了 CSS3 的 帮助 ， 数 字 图 片 看 起 来 就 像 是 图 片 一 样 


不 支持 内 容 生 成 特性 的 训 览 絮 将 不 会 显示 数字 ， 那 就 不 加 理会 吧 〈 见 图 5-14), ABH, A 


字 只 是 起 装 


饰 性 作用 ， 并 非 必 要 的 内 容 ， 因 此 这 也 是 一 次 可 以 接受 的 痢 进 增强 实践 。 





England Trip 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 
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England Trip 2007 


In May and June 2007, Cary and I spent 15 days traveling around England (plus a very brief detour into Wales). It was our first trip to 
Europe. We had very briefly been out of the USA the year before, when we jaunted up into Montreal for a few hours during our 
Vermont vacation, but this was our first significant out-of-country trip. We had a fabulous time! 


The trip was heavily focused around Jane Austen sites, both those from her life as well as a few from the 1995 mini-series Pride & 
Prejudice. You see, I am an unapologetic Janeite, and I have a very understanding and loving husband. 
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图 5-14 IE6, IE7 CE) 并 不 会 显示 数字 ,而 正 8、IE 9 (F) 则 会 显示 ， 但 并 无 其 
他 样式 


说 明 至 此 为 止 的 所 有 修改 都 在 target_2.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 文件 之 中 。 


5.2.3 SERE DX ERU TES RE 


以 上 所 有 针对 目录 的 样式 设置 还 仅仅 是 准备 工作 , 真正 要 做 的 现在 才 拉 开 帷 幕 : 当 你 点 击 目 
录 中 的 链接 ， 页 面 会 将 聚焦 区 块 进行 高 亮 显示 。 当 你 点 击 链 接 时 定位 到 的 将 是 一 个 h2 元 素 ， 因 
此 我 们 所 需 的 选择 强 是 h2 :target。 用 这 个 选择 奏 建 立 一 条 新 规则 ， 并 将 我 们 用 作 数 字 图 标 青 
景色 的 暗 蓝 色 设置 为 它 的 背景 色 ， 但 指定 更 高 的 半 透 明度 : 


h2:target { 
background-color: hsla(203,78%,36%,.2); 


} 


代码 就 是 这 般 侧 洁 。 请 保存 页 面 ， 然 后 用 训 览 必 打 开 ,， 并 点 击 其 中 一 个 链接 。 对 应 的 标题 将 
显示 出 一 个 半 透 明 的 痰 蓝 色 背景 (LEE 5-15), 
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We visited Derbyshire on the first three days of our trip. We stayed at a 
B&B called Bassett Wood Farm in the little village of Tissington, where the 
annual well dressing happened to be occuring at the same time. The 
landscape of Derbyshire was gorgeous; I can see why Elizabeth Bennet was 
so impressed. My highlights were visiting the two houses used for 
Pemberley in the Pride & Prejudice mini-series. I even got to see the little 
pond where Colin Firth's famous wet shirt scene occurs. 


DOWNLOAD: 图 Cary riding a horse for the first time (MOV) 
E| Zoe at Lyme Park 
转 Cary and Zoe in Dovedale Valley 
[Bi Zoe at Sudbury Hall 


Cobweolds 


The next seven days were spent traveling all around the Cotswolds and the 
surrounding area. We stayed at a cottage in the famously picturesque 
village of Bibury. We explored more than a dozen other Cotswolds 
villages. 
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One of our favorite towns in the Cotswolds was Cirencester, because of the 
great food we had there and the Corinium Museum. The collection of 
Roman (and earlier) artifacts at the museum was much larger than we 
expected and quite fascinating. 


The more ancient something is, the better Cary loves it, especially if it's all 








图 5-15 ”浏览 器 不 仅 将 标题 定位 到 窗口 顶部 ， 而 且 为 其 显示 了 背景 
为 了 使 界面 变 得 更 漂亮 一 点 ， 你 可 以 给 文字 增加 一 些 左 内 边 距 和 阴影 效果 : 


h2:target { 
padding-left: 10px; 
background-color: hsla(203, 763, 36%;.2)? 
text-shadow: 1px 1px 2px #fff; 

} 


现在 标题 已 经 有 了 一 个 醒目 但 ANS JUI) ROR, 当 页 面 的 焦点 跳 到 下 方 时 可 以 帮助 用 户 定 
位 〈 见 图 5-16)。 当 你 通过 包含 片段 标识 符 的 URL 进入 页 面 时 同样 会 显示 高 亮 效 果 。 





说 明 至 此 为 止 的 所 有 修改 都 在 target_3.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 文件 
zw. 


DER 


We visited Derbyshire on the first three days of our trip. We stayed at a 
B&B called Bassett Wood Farm in the little village of Tissington, where the 
annual well dressing happened to be occuring at the same time. The 
landscape of Derbyshire was gorgeous; I can see why Elizabeth Bennet was 
so impressed. My highlights were visiting the two houses used for 


图 5-16 ERANA TMII, AAE Ye es A CH A 
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对 整个 区 块 进行 高 完 显 示 

在 我 们 的 示例 页 面 里 ,如果 将 高 亮 标 题 改 为 高 亮 整 个 文章 区 块 就 显得 有 些 过 火 , 但 这 个 方 
案 在 其 他 情况 下 也 许 会 很 有 效 。 为 了 实现 这 个 需求 ， 你 需要 给 目标 区 块 包 衷 一 些 元 素 ， 比 如 
div 或 section ALA (顺理成章 ) 。 给 这 些 包 庄 元 素 赋 了 予 一 个 ID， 并 为 其 加 上 :target HR 
未 实现 定位 ， 

一 个 可 选 的 替代 方案 是 将 一 个 相 邻 兄弟 选择 器 和 :target 伪 类 结合 起 来 使 用 ， 比 如 : 
dt:target + dd。 然 而 ， 这 个 方案 仅 当 你 知晓 聚焦 之 后 有 多 少 元 素 以 及 它们 是 什么 类 型 的 情 
况 下 有 效 。 比 如 说 ， 上 一 向 给 出 的 示例 选择 器 就 只 匹配 到 目标 dt 之 后 的 一 个 dd LX, MES 
会 匹配 dt 元 素 之 后 可 能 存在 的 更 多 dd 元 素 。 


:target 伪 类 的 来 龙 去 脉 

target 伪 类 是 选择 器 (Selector) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/tr/css3-selectors 
找到 它 。 它 帮助 你 选取 一 个 元 素 ， 该 元 素 是 一 个 包 爹 片段 标识 符 的 URL 的 引用 。 

除了 用 来 将 当前 页 面 区 块 的 标题 高 亮 显 示 之 外 ， 你 还 可 以 将 :target 用 在 以 下 场景 。 

口 高 亮 显 示 脚 注 。 

O 在 一 个 目标 标题 和 劳 显示 解释 性 文字 ， 这 样 用 户 就 能 了 解 更 多 关于 目前 所 处 位 置 的 上 下 

文 信息 ， 请 参阅 http://web-graphics.com/mtarchive/001454.php , 
口 从 一 堆 相 互 层 登 的 使 容 器 或 图 片 中 突出 显示 其 中 一 个 项 目 , 请 参阅 http://virtuelvis. com/ 
archives/2003/07/target-fun , 
O 标签 化 的 内 容 块 ， 请 参阅 http:/Wcss-tricks.comycss3-tabs , 
O “+ MARK,” (Accordion) 目录 或 可 折合 的 内 容 块 ， 请 参阅 www.paulrhayes.com/2009- 
06/accordion-using-only-css ewww.thecssninja.com/css/accordian-effect-using-css , 
O 幻灯 片 效 果 ， 请 参阅 www.dinnermint.org/css/using-css3s-target-pseudo-class-to-make-a- 
lideshow fewww.nealgrosskopf.com/tech/thread.php?pid=45, 
口 相册 ， 请 参阅 www.tobypitman.com/pure-css-sliding-image-gallery, www.IE 7nomore.com/ 
fun/scroll 和 www.IE 7nomore.com/fun/slideshow , 
O #A BX 144 (Lightbox) 效果 ,请 参阅 http://sixrevisions.com/css/semantic-css3-light- 
boxes 和 www.thecssninja.com/css/futurebox2 , 

请 注意 其 中 几 项 技巧 或 许 用 JavaScript 来 控制 效果 会 更 好 , 因为 纯 CSS 的 版 本 可 能 存在 潜 
在 的 易 用 性 和 可 用 性 问题 。 也 就 是 说 ,它们 也 许 在 某 些 特定 的 环境 下 会 很 实用 ,也 能 够 为 你 提 
供 一 些 运 用 :target 的 新 想法 ， 所 以 我 将 它们 罗列 在 这 里 来 激发 你 的 灵感 。 

表 5-4 :target 伪 类 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 
支持 ，9+ 支持 部 分 支持 支持 支持 
* Opera 支持 :target 伪 类 ， 但 当 你 使 用 前 进 和 后 退 按钮 跳 离 目标 元 素 时 ，:target 样式 却 不 会 被 移 除 。 
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针对 IE 的 兼容 方案 

IE 8 及 之 前 的 版 本 并 不 支持 :target 伪 类 ， 但 正 用 户 点 击 目 孙 里 的 链接 时 仍 将 跳 转 到 相应 
的 标题 ,但 很 显然 标题 不 会 高 之 显示 。 有 既然 页 内 链接 的 正常 功能 并 无 异 肖 ，IE 8 及 之 前 版 本 的 用 
户 臣 人 并 不 会 怀疑 “这 里 缺少 了 些 什么 功能 。 用 户 念 怕 也 不 会 因为 没有 看 到 高 亮 效 果 就 迷失 于 
我 们 有 限 的 页 面 内 容 。 

然而 , 在 包 仿 更 多 内 容 的 真实 页 面 里 ,高 亮 效 果 就 可 能 成 为 一 项 确保 页 面 可 用 性 的 重要 特性 。 
可 以 想 绷 一 个 拥有 成 百 上 千 个 脚注 的 维基 百科 页 面 一 一 高 之 效果 就 真 的 非 第 实用 了 。 再 比如 作为 
跳 转 目标 的 区 块 离 页 面 底 部 很 近 , 六 览 絮 无 法 将 它 显 示 在 窗口 可 视 疙 围 的 顶部 一 一 这 同样 会 令 用 
户 感到 迷惑 。 因 此 ， 如 条 你 的 页 面 必须 要 兼容 下， 你 就 需要 用 到 JavaScript。 这 里 有 一 些 脚本 可 
供 选 择 。 

口 “Suckerfish :target" (http://www.htmldog.com/articles/suckerfish/target) ， 作 者 是 Patrick 

Griffiths 和 Dan Webb 。 
口 “Improving the usability of within-page links ” (http://dev.opera.com/articles/view/improving- 




















the-usability-of-within-page-1), fEXrj& Bruce Lawson, 
O “Fragment Highlight” (http://dorward.me.uk/software/frag), {£544 David Dorward, 


5.2.4 ”用 纯 CSS 实 现 动 画 


男 一 项 很 绚丽 的 改进 是 给 标题 的 背景 色 加 上 淡 入 淡出 效果 , 不 断 变 化 的 色彩 可 能 会 直接 引起 
鹿 蜗 者 的 注意 ， 其 至 比 突然 发 生 的 变化 更 有 效 。 

你 可 以 用 JavaScript 来 实现 上 述 效 果 。 运 用 了 该 效果 的 一 个 流行 案例 被 称 作 “黄色 背景 的 淡 
出 技术 ”(Yellow Fade Technique ) 。 这 项 技术 由 37signals 在 其 著名 的 Web 应 用 一 一 “Basecamp” 里 
开创 并 命名 。 当 你 做 了 一 次 更 改 ， 被 改动 的 部 分 将 会 高 亮 显 示 一 个 黄色 背景 且 持 续 一 段 时 间 ， 接 着 黄 
色 背 景 会 慢 慢 消 失 。 它 会 让 用 户 更 多 地 注意 到 变更 的 部 分 , 从 而 提升 了 可 用 性 帮助 用 户 找到 自己 
所 在 的 位 置 并 注意 到 页 面 里 最 重要 的 信息 。 可 以 阅读 37signals 的 日 志 (http://37signals.com/svn/ 
archives/000558.php) 来 了 解 该 团队 对 “黄色 背景 的 淡出 技术 ”的 解释 。 

当然 ， 我 们 也 可 以 抛 开 JavaScript 并 改 用 CSS3 来 实现 相同 的 效果 。 基 于 Webkit 内 核 的 训 览 
av, Opera 和 Firefox 4 都 支持 过 渡 (Transition) 特性 ， 而 基于 Webkit 内 核 的 浏览 器 还 支持 用 纯 
CSS 的 实现 的 动画 (Animation)。 过 渡 特 性 可 以 用 来 实现 聚焦 到 标题 所 出 现 的 颜色 淡 入 和 跳 离 时 
的 淡出 效果 。 动画 特性 可 以 用 来 实现 聚焦 到 标题 时 出 现 的 颜色 淡 入 或 淡出 一 一 或 两 者 间 的 连续 演 
化 。 我 们 将 分 别 试 试 这 两 种 不 同 的 方案 。 

1. “请 稍 等 ， 这 令 我 很 不 舒服 ” 

在 继续 开发 之 前 ， 先 让 我 们 暂停 一 下 来 缓和 一 下 你 洋 在 的 焦虑 。 我 知道 CSS 过 渡 和 动画 的 
实现 对 某 些 人 来 说 并 不 是 那么 容易 接受 。 

首先 ， 它 们 的 剂 览 右 支持 度 并 不 好 。 就 在 本 书 撰写 之 时 ， 过 渡 特 性 仅 兼 容 基 于 Webkit 内 核 
HUM Gas, Opera 10.5 及 其 最 新 版 和 Firefox 4 一 一 它们 仪 占 很 小 的 市 场 份 额 。 动 画 特性 更 是 只 兼 
WEF Webkit 内 核 的 浏览 历 。 正 因为 如 此 ,我 想 比 起 CSS3 的 其 他 特性 你 必须 更 谨慎 地 使 用 它们 。 
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但 只 要 你 确认 需要 实现 的 效 朱 征 真 的 用 来 点 绥 页 面 的 , B s BEC DA e S EE LAT GAUGE 
它们 的 理由 。 这 样 的 话 ， 运 用 它们 不 会 伤害 到 任何 人 ， 而 仅仅 会 多 占用 你 一 点 点 的 时 间 和 精力 。 
需要 补充 的 是 ， 一 旦 支持 度 得 到 提升 ， 你 的 页 面 一 一 还 有 你 的 CSS 技 马 一 一 将 成 为 个 中 再 楚 。 

男 一 个 被 很 多 人 所 关注 的 问题 是 过 渡 和 动画 二 者 (尤其 是 动画 ) 都 涉足 了 “行为 ”(Behavior) 
领域 ， 而 不 纯粹 是 “样式 ”(Style)。 因 此 ，( 有 些 人 认为 ) 这 些 效 末 不 应 由 CSS 来 实现 ， 它 们 应 
该 是 JavaScript、 其 他 脚本 、 程 序 或 Flash 的 活 儿 。 

我 在 茶 种 程度 上 赞同 这 个 观点 。 动 画 古 一 个 常见 的 行为 , 但 它 也 同样 是 一 个 常见 的 样式 。 请 
想象 一 个 正 不 断 发 光 的 按钮 。 “发 光 ” 对 于 按钮 来 说 是 一 项 行为 呢 ?” 还 是 一 个 简单 的 视觉 效 
果 一 一 样式 呢 ? Jimmy Cuadra 在 其 “CSS3 过 渡 和 动画 : 展现 还 是 行为 ? ”(CSS3 transitions and 
animation: Presentation or behavior? ) (www.jimmycuadra. com/blog/12-css3-transitions-and-ani- 
mation-presentation-or-behavior) 一 文中 将 这 类 效果 称 作 “展现 型 行为 ”(Presentational Behavior) , 
我 喜欢 他 对 展现 和 行为 所 作 的 区 别 擂 述 : 

我 们 一 般 认 为 “展现 ” 征 事 物 看 起 来 是 什么 ， 行为 ” 征 事 物 做 了 什么 。 我 认为 “展现 X 
任何 不 会 从 根本 上 改变 页 面 的 东西 ,而 “行为 ” 则 是 任何 会 影 啊 文档 的 结构 或 数据 ， 或 对 显 性 的 
用 户 交 互 有 帮助 的 事物 。 

Elliot Swan 则 在 一 则 评论 (http://mondaybynoon.com/2009/05/04/covering-the-implication-and- 
basics-of-css-animation/#comment-9099) 中 对 过 小 和 动画 给 出 了 另 一 种 诠释 : 


我 并 不 把 过 渡 和 动画 看 成 是 “样式 ”或 “行为 ”中 的 任何 一 种 ， 它 们 应 该 属于 “ 充 

果 ?” 的 范畴 。( 或 者 你 也 可 以 争辩 说 “效果 ”其 实 是 “样式 ”和 “行为 ”综合 作用 的 结果 。) 

这 种 “展现 式 行 为 ”(Presentational Behavior) 或 “效果 ”并 不 是 从 CSS3 开始 才 有 。 早 在 
CSS 2.1 就 有 包含 “行为 ”意味 的 样式 出 现 ， 即 :hover、:focus 和 :active 伪 类 。 当 你 悬 停 于 
某 个 按钮 时 它 的 颜色 发 生 了 改变 ， 这 是 一 个 “行为 ， 但 该 “行为 ”是 一 种 装饰 以 及 对 可 用 性 的 
增强 ， 而 对 内 容 或 功能 来 说 它 并 不 是 必须 的 。CSS3 只 是 对 它 进 行 了 扩展 ， 让 你 使 用 CSS 就 能 
广泛 地 筝 控 动 态 的 样式 效果 。 我 认为 通过 样式 语言 来 控制 向 单 的 装饰 性 动画 是 行 得 通 且 可 接受 
的 ， 而 更 复杂 或 包含 更 多 行为 的 动画 则 应 该 保留 在 脚本 语言 或 Flash 领域 。 

WA, CSS 动画 可 能 被 滥用 。 它 不 该 被 用 来 实现 重要 的 行为 ， 异常 复 杂 的 动画 用 Flash 来 实 
现 会 显得 更 优雅 和 高 效 ， 但 有 一 些 人 还 是 会 选择 用 CSS 来 实现 。 对 这 种 行为 我 只 能 表示 遗憾 ， 
但 这 就 是 CSS 的 命运 ， 对 于 任何 CSS 技术 来 说 都 一 样 。 这 些 恶 魔 般 的 Web 设计 师 总 是 能 将 纯洁 
的 CSS 捡 碎 在 他 们 同样 恶魔 般 的 网 站 里 。 

不 用 关心 这 些 “ 恶 魔 设 计 师 ”会 用 CSS 动画 和 过 渡 来 做 什么 。 你 只 需 保证 自己 带 着 责任 感 
去 有 效 地 运用 它们 。 毕 竞 它们 有 其 自身 的 诸多 好 人 处。 

2. CSS 过 渡 和 动画 的 益处 

CSS 过 渡 和 动画 最 大 的 优点 之 一 便 是 一 一 一 旦 你 了 解 它们 的 语法 , 那么 初期 部 署 和 后 期 维护 
都 将 比 同样 效果 的 JavaScript 和 Flash 代码 要 简单 得 多 (不 过 请 确保 你 恰当 地 使 用 了 CSS3 oh 
画 一 一 较 复杂 的 动画 使 用 Flash 完成 仍 更 简单 ， 无 论 如 何 你 不 该 用 CSS3 动画 来 做 复杂 的 事情 )。 
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而 且 CSS 是 免费 的 ， 但 使 用 Flash 来 制作 动画 则 绝对 不 是 。 

而 提 到 对 用 户 的 好 处 ，CSS 过 渡 和 动画 并 不 依赖 JavaScript 的 启用 状态 或 Flash 插件 安装 与 
否 ， 它 的 效果 由 浏览 器 内 置 的 功能 生成 。 某 些 用 户 会 禁用 JavaScript， 而 Flash 也 看 起 来 永远 不 会 
出 现在 iPhone, iPod Touch 和 iPad 的 iOS E f, Pros ORTA bias xt CSS 动画 的 支持 度 还 不 
高 ， 但 在 未 来 ， 当 支持 度 得 以 提升 之 后 ， 它 可 能 就 成 了 你 将 简单 的 装饰 性 效果 展示 给 最 广 认 受众 
的 最 佳 方式 了 。 

CSS3 过 渡 和 动画 还 有 效率 上 的 优点 。 你 无 需 使 用 任何 外 部 JS 或 SWF 文件 来 执行 它 ，HTTP 
请 求 也 会 因此 减少 。 有 时 它们 对 用 户 机 器 的 资源 耗费 会 更 少 ， 至 少 和 JavaScript 的 版 本 相 比 确 是 
如 此 。 但 这 很 大 程度 上 取决 于 动画 的 实现 和 用 来 对 比 的 技术 本 身 一 一 Flash 版 本 对 处 理 左 的 资源 
耗费 通常 比 同等 效果 的 CSS3 版 本 要 低 。 因 此 我 再 次 重申 ， 请 务必 只 用 过 渡 和 动画 来 实现 相对 简 
单 的 效果 ， 而 且 和 需要 经 过 细致 的 测试 。 








说 明 请 参考 Flash 和 CSS3 两 个 版 本 的 广告 实现 对 比 : www.sencha.com/blog/2010/07/20/html5- 


family-css3-ads-versus-flash-ads , 





我 并 不 是 说 CSS 过 波 和 动画 就 是 一 粒 万 灵 药 或 是 它们 并 无 缺点 。 上 只 要 保证 在 合适 的 场景 下 
小 心地 使 用 ， 它 们 就 会 古 非 党 实用 的 工具 。 下 面 就 让 我 们 看 看 如 何 实 践 这 一 操 。 

3. 使 用 CSS 过 渡 实 现 色彩 次 入 

为 当前 标题 的 背景 色 实 现 痰 入 效果 的 首选 方案 便 是 使 用 过 渡 。 这 其 实 就 是 最 简单 的 CSS aJ 
画 了 。 你 可 以 用 过 渡 来 简单 地 实现 两 个 不 同样 式 之 间 平 背地 渐进 式 变 化 ， 而 不 会 出 现 当 你 二 停 、 
聚焦 某 元 素 或 其 他 状态 发 生 改 变 时 样式 突然 地 跳跃 性 变化 。 

要 设置 一 次 过 渡 ， 你 需要 告诉 浏览 右 哪 个 属性 你 需要 对 其 进行 狐 进 式 变化 〈 使 用 
transition-property) 和 该 变化 会 持续 多 少 秒 (使 用 transition-duration)。 你 还 可 以 
选择 性 地 增加 一 个 过 渡 开 始 时 的 延迟 值 (transition-delay) 和 过 湾 期 间 速 度 的 变化 市委 


人 


说 明 你 可 以 通过 以 下 这 个 实用 的 示例 来 查看 每 种 过 涛 市 半 函数 : http://css3.bradshawenterp- 


rises. com, 


所 有 这 些 属性 可 以 合并 为 一 个 简写 属性 : transition, ECA n2 WU, BEZAN] 
览 器 的 私有 属性 : 


h2 d 
clear: left; 
margin: 0 0 -.14em 0; 
color: #414141; 
font-family: Prelude, Helvetica, "Helvetica Neue", 





Arial, sans-serif; 
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font-size: 2.17em; 

font-weight: bold; 

-moz-transition: background-color 1s ease-out; 
-o-transition: background-color 1s ease-out; 
-webkit-transition: background-color 1s ease-out; 
transition: background-color 1s ease-out; 


} 


ELE, RAO boas: HEA h2 元 素 的 background-color 属性 值 发 生变 化 ， 
我 们 就 希望 它 能 壮 进 式 地 持续 1 秒 钟 。 我 们 也 将 transition-timing-function 属性 指定 为 


ease-out 以 期 动画 能 在 收尾 时 减 慢 速度 。 


过 渡 效 末 很 难 用 静态 的 书籍 摘 绘 出 来 ， 但 图 5-17 大 致 显示 出 当 页 面 定 位 到 标题 时 其 背景 色 
征 如 何 痢 进 式 变 化 的 。 当 你 按 下 浏览 右 的 后 退 键 来 跳 离 标题 时 ， 过 湾 将 反 加 播放， 即 从 监 色 变 为 


EH, 
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We visited Derbyshire on the first three days of our trip. We stayed ata 


B&B called Bassett Wood Farm in the little village of Tissington, where the 
annual well dressing happened to be occuring at the same time. The 





landscape of Derbyshire was gorgeous; I can see why Elizabeth Bennet was 








图 5-17 ”过渡 持续 了 1 秒 钟 以 后 ， 标 题 的 背景 色 从 透明 逐渐 变 成 了 蓝 色 


哪些 属性 可 以 用 来 产生 过 渡 效 果 


并 非 所 有 的 属性 都 能 用 来 产生 过 渡 效 果 。W3C 把 那些 可 以 用 作 过 渡 的 称 作 “可 产生 动画 
的 属性 ” (Animatable Properties) ， 并 把 它们 罗列 在 www.w3.org/tr/css3-transitions/#animatable- 
properties, 这 也 是 为 何 我 在 h2:target 的 规则 里 使 用 background-color 而 不 用 


background 简写 属性 的 缘故 ,background-color 可 以 用 来 产生 过 


JE BWR, 但 background 
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不 行 。 或 者 应 该 说 ， 它 不 该 产生 转换 。Webkit 和 Firefox 并 不 遵守 该 规则 ， 但 Opera 却 不 然 ， 
所 以 如 果 我 们 用 background 属性 替换 了 background-color， 那 么 过 淫 效 果 就 不 会 正常 工 
作 在 Opera Bic 


我 们 也 可 以 将 过 渡 的 相关 代码 从 n2. 的 规则 里 取出 来 放 到 h2 :target 里 。 但 如 琳 我 们 真 的 
这 样 做 了 ,过渡 效 末 就 只 会 当 页 面 聚 焦 于 标题 的 时 候 才 会 出 现 ; 而 当 焦点 离开 标题 时 ， 过 湾 效 采 
便 不 会 逆向 播放 了 , 而 是 突然 地 变 回 透明 背景 。 而 且 , 目前 Opera 只 文 持 元 素 原 始 状 态 时 的 过 渡 ， 
因此 如 霖 将 过 渡 写 到 n2: target 规则 里 ，Opera 将 无 法 看 到 效 朱 。 这 看 起 来 是 一 个 错误 的 行为 ， 
但 尚 在 制定 中 的 W3C 规范 并 未 将 这 一 点 描述 请 芭 。 


说 明 想 要 体验 过 渡 的 效果 , 请 用 支持 过 渡 特 性 的 浏览 器 打开 target 4.html 文件 ,该 文件 包含 在 
本 章 的 示例 文件 里 ， 它 包含 了 至 此 为 止 的 所 有 修改 。 


除了 背景 色 变 化 之 外 ,我 们 还 可 以 把 左 内 边 距 加 入 到 高 竞标 题 的 过 渡 代 码 里 , 这 会 创造 出 文 
字 辣 右 背 动 的 效果 。 你 可 以 直接 将 内 边 距 的 过 渡 代 码 写 到 相同 的 transition 属性 里 ， 用 逗号 
HaT: 





H2 1 
clear: left; 
margin: 0 0 -.14em Q; 
color: #414141; 
font-family: Prelude, Helvetica, "Helvetica Neue", 


Arial, sans-serif; 
font-size: 2.17em; 
font-weight: bold; 
-moz-transition: background-color 1s ease-out, 
padding-left .5s ease-out; 
-o-transition: background-color 1s ease-out, 
padding-left .5s ease-out; 
-webkit-transition: background-color 1s ease-out, 
padding-left .5s ease-out; 
transition: background-color 1s ease-out, 
padding-left .5s ease-out; 


transition 属性 的 来 龙 去 脉 
transition 属性 是 过 涛 (Transition) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/tr/css3- 
transitions 7X26, Vr transition-property., transition-duration, transition- 
timing-function fe transition-delay MASA, FAC, VR VACUA EXAM 
时 将 茶 个 属性 值 逐 渐 地 变化 成 另 一 个 值 。 
要 实现 一 次 过 沪 效 果 ， 必 须 设 置 的 值 是 transition-property (指定 该 元 素 需 要 进行 
渐进 式 变化 的 属性 ) Fe transition-duration (指定 变化 需要 持续 的 时 间 do FB N 
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默认 为 0) 。 其 他 参数 是 可 选 的 。 
人 
并 用 去 号 隔 开 。 你 也 可 以 指定 transition-property 的 值 为 all 使 该 元 素 的 所 有 属性 都 发 
但 并 不 是 每 个 属性 都 可 以 发 生 转 换 ; 请 浏览 www.w3.org/tr/css3-transitions/#animatable- 
properties- 来 获取 支持 过 没 的 属性 的 完整 列表 。 所 有 支持 过 淫 特 性 的 浏览 器 部 支持 这 些 属 性 中 
的 大 多 数 ， 但 也 存在 诸多 的 例外 恕 我 不 能 全 部 罗列 于 此 。 
欲 获取 更 多 有 关 过 渡 的 语法 细节 和 示例 ， 请 参阅 www.webdesignerdepot.com/2010/01/css- 
transitions-101 和 http://thinkvitamin.com/design/sexy-interactions-with-css-transitions 。 
除了 用 来 实现 背景 色 的 淡 入 效果 之 外 ， 你 还 可 以 将 transition 用 在 以 下 场景 。 
O 逐渐 地 改变 按钮 、 标 签 或 链接 的 悬 停 /聚焦 和 非 悬 停 / 失 焦 状态 。 
O 妆 饼 标 悬 停 于 图 片 时 逐渐 变 亮 《对 不 透明 度 进 行 过 没 ) 。 
口 使 相互 层 登 在 一 起 的 图 片 实现 交替 渐变 (比如 用 彩色 照 蔡 换 黑 白 照 ， 或 事物 状态 的 前 
后 对 比 图 )， 请 参阅 http://trentwalton.com/2010/03/30/css3-transition-delay 和 http://css3. 
bradshawenterprises.com 。 
O 当 巧 停 时 使 图 标 缓慢 变色 〈 通 过 延明 区 域 露 出 背景 ， 之 后 再 转换 背景 色 ) ， 请 参阅 
www.ackernant.com/twtorial/rockingicon-with-css , 
O 渐渐 地 显示 出 工具 提示 (tooltip) 4e4z 23%, i5 A IX] www.zurb.com/playground/drop-in-modals , 
O 实现 物体 发 光 或 收缩 的 效果 《使 其 帘 度 、 山 度 产 生 过 涛 ， 或 变形 其 缩放 值 ) ， 请 参阅 
www.zurb.com/playground/css3-polaroids 和 Www.marcofolio.net/css/animated wicked _ 
css3 3d bar chart.html, 
O 使 元 素 滑 入 界面 之 内 (AEREA, mpE AROEÉGUAGURSÓAGEE).DHOT48AR. me 
目录 或 特色 内 容 的 幻灯 片 等 ， 请 参阅 www.nealgrosskopf.com/tech/thread.php?pid-45 , 


http://dev.opera.com/articles/view/css3-show-and-hide, www.impressivewebs.com/animated- 





sprites-css3 和 http://css3.bradshawenterprises.com , 
O 创造 一 副 移 动 的 背景 图 ， 请 参阅 www.paulrhayes.com/2009-04/auto-scrolling-parallax- 


effect-without-javascript , 


#5-5 transition 属性 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 
不 支持 支持 , 需要 -moz- ”支持 , 需要 -o- 前 级 ， ”支持 , 需要 -webkit- ”支持 , 需要 -webkit- 
前 级 ，4+ 10.5+ 前 级 前 级 


至 此 ， 内 边 距 将 随 着 背景 色 的 变化 逐渐 从 0 变 到 10px ( 见 图 5-18)。 这 两 个 过 滤 运行 起 来 ， 
平滑 与 否 取决 于 你 的 浏览 器 (Webkit 似乎 表现 得 最 平滑 ,而 Firefox 则 忽 快 忽 慢 ) ,但 这 些 简单 的 
效果 在 所 有 支持 该 特性 的 浏览 器 上 表现 得 都 很 好 。 
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5-18. 过 波 完 成 之 后 ， 标 题 育 景 变 蜡 而 文字 辐 右 移动 了 10 像素 


4. 使 用 CSS 动画 使 颜色 淡出 

我 认为 短暂 地 显示 出 当前 标题 的 背景 色 然 后 再 痰 出, 会 比 淡 入 效果 更 有 效 和 醒目 。 由 于 过 渡 
比 动 画 拥 有 更 广 的 浏览 袁 支 持 度 《请 记 住 目 前 只 有 Webkit 支持 动画 特性 )， 如 末 能 用 过 渡 来 实现 
这 一 效果 将 更 好 。 但 遗憾 的 是 ， 过 渡 无 法 实现 该 需求 ， 因 为 我 们 要 求 标 题 的 背景 色 〈 聚 焦 之 前 ) 
从 透明 变 成 蓝 色 (聚焦 之 后 )， 接 着 再 变 回 透明 (聚焦 一 秒 之 后 )。 这 个 效果 有 三 个 变化 点 ， 而 过 
渡 仅 能 完成 两 个 值 之 间 的 变化 。 

而 CSS3 动画 理论 上 支持 无 限 次 变化 。 你 可 以 设置 一 系列 的 关键 帧 (KeyFrame)， 即 动画 过 
程 中 变化 点 ， 每 帧 都 有 它 目 己 的 样式 。 接 着 ， 剖 览 磊 依照 顺序 平 请 地 在 关键 帆 中 过 疲 ， 慢 慢 地 变 
化 所 有 设置 过 的 属性 。 

欲 创建 一 个 CSS 动画 ， 你 首先 需要 为 其 指定 一 个 名 称 ， 并 定义 每 一 个 关键 帧 里 所 要 发 生 的 
变化 。 你 必须 使 用 ekeyframes 创建 规则 ， 但 既然 目前 只 有 Webkit 支持 动画 特性 ， 我 们 就 需 
书写 两 条 规则 : —2& 4 -webkit-b Miss Hs. — 41x H — A SARA. a PAA 
则 加 入 你 页 面 的 CSS 代码 里 : 


@-webkit-keyframes fade { 
% (background: hsla(203,78%,36%, .2);} 
100% (background: none; } 























】 
@keyframes fade { 


% Ibackground: hsla(203,78%,36%,.2);} 
100% (background: none; } 
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我 们 将 动画 命名 为 “fade”， 然 后 为 其 设 定 了 两 个 关键 帧 ， 一 帧 是 整个 过 程 0s ( 换 而 言 之 ， 
即 起 始点 ) 而 另 一 帧 征 100gs( 即 结束 点 )。 我 们 也 可 以 使 用 关键 词 from 和 to 来 代替 OFF 100%, 

目前 已 经 设 定 好 了 想 要 的 动画 内 容 ， 下 面 需 要 将 它 赋 予 菜 个 元 素 。 我 们 希望 动画 在 h2 元 素 
上 产生 ， 因 此 就 在 已 有 的 h2:target 规则 下 建立 一 个 新 的 规则 (很 快 将 会 发 现 为 什么 在 这 里 没 
把 代码 写 入 已 存在 的 规则 里 ): 


h2:targetí 
padding: 0; 
background: none; 








-webkit-animation-name: fade; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease-in; 


} 

EIR RAGE ROI GE as CARH oh “fade” (fHj-webkit-animation-name 属性 )， 
我 们 希望 该 动画 持续 两 秒 (使 用 -wepbkit-animation-duration 属性 )， 并 且 仅 执行 一 次 (使 
用 -webkit-animation-iteration-count 属性 )。 我 们 还 告诉 族 贤 絮 我 们 希望 动画 使 用 “组 
入 ”(Ease in) 效果 ， 即 动画 的 开始 比 结束 时 稍 慢 。 

你 也 可 以 将 所 有 这 些 属 性 合并 到 animation 简写 属性 。 下 面 我 们 将 拥有 -webkit -前缀 的 
相关 属性 向 写成 -webkit-animation 属性 ， 同 样 也 增加 一 个 无 前 级 的 animation 属性 给 
h2:target Jl. 


h2:targetí 
padding: 0; 
background: none; 
-webkit-animation: fade 2s ease-in 1; 
animation: fade 2s ease-in 1; 


) 

这 条 新 建 的 h2 :target 规则 还 删除 了 前 一 条 规则 里 定义 的 左 内 边 中 和 背景 色 。 如 采 我 们 没 
有 删除 背景 色 ， 动 画 将 会 执行 一 次 ， 接 着 当 它 结束 时 ， 会 突然 跳 回 监 色 并 一 直 保持 住 。 我 们 需要 
透明 的 标题 背景 色 ,， 以 便 动画 能 完全 地 控制 背景 色 ， 因 此 当 动 画 结束 时 ,我 们 希望 标题 的 背景 
能 一 直 保 持 为 透明 状态 。 

删除 内 边 距 这 一 设置 , 从 另 一 方面 讲 , 并 不 是 必需 的 。 我 选择 删除 它 是 因为 一 旦 背景 色 消 失 ， 
文字 的 缩 进 就 没 了 意义 。 为 了 解决 这 个 问题 我们 可 以 为 内 边 距 增加 动画 一 一 使 它 从 10px 缩减 
至 0， 即 我 们 在 之 前 的 过 渡 里 所 设置 的 相反 过 程 。 但 我 发 现在 本 例 中 ， 内 边 距 的 变化 反而 会 令 人 
分 心 ， 它 看 起 来 更 适合 痰 入 效果 ， 而 不 是 淡出。 我 决定 简化 效果 ， 去 掉 了 内 边 距 。 

保存 页 面 ， 然 后 在 Safari 或 Chrome 中 训 览 它 。 当 你 点 击 一 个 链接 时 ， 与 之 对 应 的 标题 育 景 
将 立即 变 为 监 色 ， 并 缓慢 而 平 请 地 消失 〈 这 个 过 程 很 像 图 5-17， 但 顺序 要 倒转 过 来 )。 

假如 蓝 色 在 茶 个 时 刻 停 留 一 会 儿 然 后 才 消 失 ， 效 有 果 应 该 会 更 妙 。animation-delay 属性 可 
以 帮助 你 延迟 动画 的 开始 时 间 , 但 并 不 适合 我 们 所 设想 的 情况 , 因为 动画 标题 一 开始 并 没有 颜色 。 
动画 开始 之 前 ， 用 户 根本 看 不 到 蓝 色 背景 ,或 者 说 根本 就 没有 任何 背景 色 。 
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更 复杂 的 玩法 
在 本 例 中 ,我 们 在 每 个 关键 帧 中 只 变更 了 背景 色 ,， 实际 上 只 要 你 愿意 ， 可 以 在 里 面 增 加 任 
意 多 个 属性 。 将 它们 如 其 他 CSS 规则 一 样 写 进 同 一 个 关键 帧 的 花 括 号 里 。 比 如 说 ， 如 果 你 想 
同时 改变 字号 和 背景 色 ， 可 以 这 样 做 : 
@-webkit-keyframes fade { 
$ { 
lode icu cc leila UU OS UM 
font-size: 100$; 
j 
100% ( 


background: none; 
font-size: 120%; 


} 


一 个 元 素 可 以 设置 多 个 动画 ， 因 此 你 可 以 将 上 面 的 动画 分 成 两 个 独立 的 动画 : 


@-webkit-keyframes fade { 
着 (backgrounci:s nela(203,78%, 36, .2)3} 
L003 (backgrouncis none; } 


} 
@-webkit-keyframes scaletext ( 
$ (font-size: 100%; } 
100% {font-size: 1202; | 
} 
然后 在 同一 个 元 素 上 设置 两 个 动画 : 


GE 
-webkit-animation-name: fade, scaletext; 
-webkit-animation-duration: 2s; 
-webkit-animation-iteration-count: 1; 
-webkit-animation-timing-function: ease-in; 


将 动画 分 开 将 产生 更 多 的 代码 , 但 在 复杂 的 动画 里 可 以 便于 你 跟踪 每 一 个 步骤 ,而 且 还 可 
以 独立 地 为 每 个 动画 设置 持续 时 间 、 播 放 次 数 和 其 他 属性 。 还 有 一 个 优点 是 你 可 以 将 动画 复 用 
到 其 他 元 素 上 。 比 如 ， 你 可 能 想 为 h2 设置 “淡出 ”和 “字号 变化 ”两 个 动画 ， 但 只 想 为 h3 
设置 “字号 变化 ”这 一 个 ， 既 然 动画 都 是 独立 的 ， 你 就 可 以 复 用 “字号 变化 ”而 不 用 为 13 重 
新 书写 一 个 。 


animation 属性 的 来 龙 去 脉 
animation 属性 是 动画 (Animation) 模块 的 一 部 分 ， 你 可 以 在 www.w3.org/tr/css3- 
animations JX$|^7Z, 'ZX animation-name, animation-duration, animation-timing- 


ir CAGE ALON animation-delay , animation-iteration-count 、 and animation- 


` 


direction 的 简写 属性 (有 顺序 要 求 )， 
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在 使 用 上 述 属 性 为 某 个 元 素 创 建 动 画 之 前 ， 你 需要 首先 为 动画 命名 ， 并 使 用 @keyframes 
规则 定义 动画 的 内 容 。 关 键 帧 是 动画 过 程 中 的 多 个 时 间 上 点 ， 用 百分数 表示 ; 关键 词 from 和 to 
分 别 等 同 于 0% 和 100%。 每 个 关键 帧 包含 了 适合 应 用 时 的 样式 规则 。 浏 览 器 从 首 个 关键 帧 往 


除了 用 来 使 背景 色 淡 出 之 外 ， 你 还 可 以 将 animation 用 在 以 下 场景 。 

口 实现 按钮 有 节奏 地 发 光 ， 请 参阅 www.zurb.com/playground/radioactive-buttons 。 

口 读 取 状 态 提 示 ， 请 参阅 http:/24ways.org/2009/css-animations 。 

O 闪 视 卡 (Flash Card) , 请 参阅 http://line25.com/articles/super-cool-css-flip-effect-with- webkit- 

animation. 

O LARAR GWAR, FARM www.zurb.com/playground/sliding-vinyl. 

网 上 有 许多 更 复杂 ， 看 起 来 更 像 电 影 的 CSS 动画 效果 ， 我 列 在 这 里 的 仅 是 一 些 更 具有 实 
践 意义 的 例子 。 弄 清楚 它 完 竞 能 实现 些 什 么 效果 是 很 有 趣 的 ， 请 上 Google 搜索 “CSS3 
Animation” 试 试 。 


表 5-6 animation 属性 的 浏览 器 支持 度 
IE Firefox Opera Safaril Chrome 
不 支持 不 支持 不 支持 ” ”支持 , 需要 -webkit -前 级 ”支持 ,需要 -wepkit -前 级 


除了 使 用 animation-delay 来 延迟 动画 开始 的 时 间 之 外 , 我们 还 可 以 在 动画 中 增加 一 个 关 
键 帆 来 让 背景 保持 为 瞳 监 色 : 


@-webkit-keyframes fade { 
0% {background: hsla(203,78%,36%,.2);} 
20% (background: hsla(203,78%, 36%, .2) ;} 
100% (background: none; } 

} 

@keyframes fade { 
0% {background: hsla(203,78%,36%,.2);} 
20% (background: hsla(203,78%, 36%, .2) ;} 
100% (background: none; } 


改动 之 后 ， 动 画 一 开始 会 立即 显示 一 个 监 色 背景 ， 保 持 这 个 颜色 直到 20% 的 进度 (0.4 f) , 
接着 开始 痰 出 直到 变 成 透明 。 








说 明 想 要 体验 动画 的 效果 ， 请 用 Safari 或 Chrome 打开 target 5.html 文 件 ， 该 文件 包含 在 本 章 
的 示例 文件 里 ， 它 包含 了 至 此 为 止 的 所 有 修改 。 


5. 针对 其 他 浏览 器 的 兼容 方案 
淡出 的 动画 目前 在 Safari 和 Chrome 上 运行 正常 了 ,但 其 他 浏览 器 怎么 办 ?为 了 保证 动画 的 
正常 运行 ， 我 们 必须 从 当前 聚焦 的 n2 元 素 上 移 除 背景 色 ， 因 此 现在 你 在 非 Webkit 内 核 的 浏览 





166 BSE 使 用 伪 类 来 提高 效率 


ar Eth HKEE, EMMA eH. 

我 们 所 需要 的 方案 是 让 不 文 持 CSS BHAT bE ae Alas —4& h2:target 规则 , 而 支持 该 特性 
的 训 览 右 则 识别 应 用 了 透明 背景 色 的 第 二 条 规则 。 我 们 可 以 使 用 早 在 第 1 全 就 介绍 过 的 Modemizr 
脚本 。 

该 脚本 已 包含 在 你 下 载 的 本 章 示 例文 件 中 ， 所 以 请 你 直接 在 页 面 的 head 中 加 上 如 下 代 
码 : 


«Script srcs"scripts/modernizr-1.65.min.jsS'»«/sScript» 


说 明 本 书 编撰 之 时 ， 示 例文 件 中 所 和 包 钨 的 Modernizr 版 本 是 1.6。 但 当 你 阅读 时 它 可 能 已 经 有 
了 最 新 的 版 本 ， 请 你 下 载 并 予以 替换 。 可 以 到 www.modernizrcom & 4 J& A, 





该 脚本 在 页 面 的 html 元 素 中 增加 类 来 表示 相关 特性 是 否 被 支持 。 举 个 例子 ，Modernizr 会 
Ay Safari 和 Chrome jul bias E html 标签 上 增加 一 个 名 为 “cssanimations” 的 类 ,而 所 有 其 他 辛 览 
器 将 会 被 赋予 另外 一 个 名 为 “no-css-animations” 的 类 ,。 我们 可 以 改变 第 二 个 h2 :target 选择 器 ， 
让 它 仅 在 cssanimations 类 存在 时 方才 有 效 : 


.CSsanimations h2:target{ 
padding: 0; 
background: none; 
-webkit-animation: fade 2s ease-in 1; 
animation: fade 2s ease-in 1; 


j 
保存 页 面 ， 然 后 分 别 用 一 个 Webkit WZA bias F— PE Webkit Ai At zs AE. CEBI— 
个 麟 览 釉 上， 当 标 题 被 聚焦 时 你 将 看 到 运行 中 的 痰 出 动画 。 而 在 后 者 上 ， 当 标题 被 聚焦 时 你 将 看 
到 痰 入 的 过 渡 。 而 在 既 不 支持 过 渡 和 动画 特性 ， 却 支持 :target (LER IE 9 fi Firefox 3.6 及 其 之 
后 的 版 本 ) 的 浏览 上 亚 上 ， 当 标题 被 聚焦 时 你 将 看 到 蓝 色 的 背景 色 立 即 展现 出 来 。 而 最 后 ， 对 于 不 
支持 以 上 所 有 特性 的 浏览 絮 〈 比 如 下 8 及 之 前 的 版 本 ) ， 当 你 点 击 目 孙 中 的 链接 时 并 不 会 展现 任 
何 特效 。 
当然 了 ， 目 录 的 链接 依旧 可 用 一 一 它们 会 像 往 稼 那样 把 用 户 带 到 页 面 的 下 方 ,因此 使 用 低 端 
功能 浏览 红 的 用 户 将 不 会 察觉 到 他 们 错过 了 什么 内 容 。 如 采 你 真 的 必须 在 这 些 浏 览 如 下 实现 淡出 
效果 ， 你 可 以 选择 如 下 解决 方案 。 
O 使 用 动态 的 GIF 图 片 。 诚 然 ， 这 个 方法 有 些 过 时 ,但 它 同 时 也 是 最 完美 的 解决 方法 。 但 
请 注意 这 个 方法 只 适用 于 那些 支持 :target 伪 类 的 测 艳 如 。 你 所 需要 做 的 ， 只 是 制作 一 
个 颜色 变化 的 动态 GIF， 接 着 把 它 设置 为 hn2 :target 的 背景 图 。 可 以 阅读 一 篇 完整 地 介 
绍 该 方法 的 文章 “Star on :target" (http://thinkvitamin.com/dev/stay-on-target) ,作者 是 Brian 
Suda, 
O 使 用 脚本 。 无 论 浏 览 器 是 否 支 持 :target 伪 类 该 方案 都 有 效 (当然 ， 用 户 必 须 启用 了 
JavaScript, 而且 该 脚本 需要 支持 用 户 的 浏览 絮 )。 如 何 编写 这 个 脚本 已 经 超出 了 本 书 涉及 
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的 范围 , 但 你 可 以 访问 www.marcofolio.net/css/css3 animations and their jquery equivalents. 
html 和 http:// weston.ruter.net/projects/jquery-css-transitions 来 歼 取 一 些 脚本 , 它们 可 以 兼容 
所 有 的 过 小 和 动画 效果 。 或 者 别 忘 了 上 Google 搜索 “Javascript Animation Framework” , 
最 后 ， 如 东 你 还 对 淡出 技术 感 兴 趣 ， 请 用 Google 搜索 “Yellow Fade Technique ， 你 将 找 
到 大 量 的 脚本 一 一 其 中 一 些 是 独立 的 , 另 一 些 则 依赖 于 某 个 特定 框架 一 一 这 就 留 给 你 目 己 
去 抉择 了 。 

但 无 论 使 用 上 述 哪个 选项 , 请 记得 使 用 正 条 件 注 释 或 Modernizr 对 不 同 训 览 右 隐藏 拯 额 外 的 

CSS 或 脚本 。 











AERAR, Ae ATT 





Pd LEE DI ZA Vo KS ETC CLINT REA. Maz AS A EI Ut. HA TAE 
宽屏 电视 、 台 式 电脑 、 笔 记 本 、 手 机 其 至 古 一 台 冰 箱 来 访问 你 的 网 站 。 尽 管 你 无 法 保证 一 个 网 站 
在 不 同 屏 幕 尺寸 和 不 同 字号 的 设备 上 看 起 来 都 完全 一 样 ， 但 至 少 可 以 让 网 站 去 适 配 用 户 的 设置 ， 
使 它 在 可 用 的 屏幕 空间 里 有 民 好 的 展现 和 完整 的 功能 。 在 本 章 中 ， 你 将 会 学 到 如 何 使 用 CSS3 的 
“媒体 查询 ”(Media Queries) 特性 来 让 一 个 页 面 设计 快速 地 适应 于 不 同 的 屏幕 尺寸 ， 从 而 使 你 的 
页 面 显 得 更 高 效 、 灵 活 和 多 用 。 


你 将 学 到 

我 们 将 使 用 CSS3 重新 编写 一 个 页 面 布 局 以 使 之 适应 不 同 的 屏幕 尺寸 和 设备 : 
O 使 用 “媒体 查询 ”特性 根据 访客 的 设备 属性 分 别 应 用 不 同 的 样式 ; 

口 使 用 “多 列 布局 ”使 文字 自 适 应 于 并 列 的 栏 。 


6.1 基础 页 面 


图 6-1 展示 出 一 个 虚拟 面包 坊 的 页 面 布局 。 该 布局 是 一 个 液态 布局 (也 称 为 “ 流 态 布局 ”)， 
它 可 以 根据 训 览 右 窗 口 的 宽度 进行 目 我 调整 , 从 而 适用 于 不 同 的 屏幕 尺寸 而 不 会 出 现 横 向 深 动 条 
或 引起 茶 些 元 素 重 谷 。 然 而 在 某 些 屏幕 尺寸 上 它 理 应 比 其 他 情况 的 页 面 看 起 来 更 好 一 些 。 在 极 宽 
或 极 罕 的 窗口 上 ， 该 设计 邦 可 以 正常 使 用 并 且 看 起 来 尚 可 接受 ， 只 是 并 没有 800px 至 1200px yu 
围 内 看 起 来 那么 吸引 人 ( 见 图 6-2)。 
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6-2 ”页面 在 极 宽 和 极 窗 的 窗口 上 看 起 来 沿 可 ， 但 并 不 出 色 





在 《灵活 Web 设计 : 使 用 CSS 创建 该 态 和 弹性 布局 》 一 书 的 第 2 草 中 ， 我 向 大 家 展示 了 液 
eum 局 如 何在 保证 设计 的 美妙 和 丰富 的 同时 ， 又 能 适应 多 种 屏幕 尺寸 。 你 可 以 选用 灵活 的 图 片 、 
适当 的 文本 长 度 以 及 创造 性 地 使 用 页 面 留 白 来 保证 设计 适用 于 很 大 的 宽度 范围 。 然 而 我 并 不 否认 
一 点 ， 即 制作 出 一 个 在 2000px 时 每 个 部 分 都 被 精确 实现 的 页 面 而 且 将 它 压缩 至 300px 之 后 依旧 
能 够 保持 完美 ， 儿 平 是 不 可 能 的 。 一直 以 来 我 都 提倡 使 用 min-wigth fH max-width, 并 为 移动 
设备 编写 不 同 的 样式 来 解决 这 个 问题 。 
《灵活 Web 设计 》 一 书 动笔 于 2008 年 ， 然 而 在 那 之 后 ， 
经 有 了 很 好 的 浏览 右 支 持 度 ， 它 可 以 使 页 面 在 任意 你 想 要 的 尺寸 范围 内 工作 ， 
媒体 查询 。 





款 用 来 创 EOM 局 的 新 式 工 具 
这 个 工具 区 是 : 
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6.2 ”媒体 三 询 是 什么 


媒体 查询 可 以 让 你 根据 用 户 所 使 用 的 设备 或 显示 器 特性 来 自 定 义 样式 ， 比 如 可 视 区 域 的 宽 
度 ， 目 前 处 于 纵向 还 是 横向 模式 ， 或 者 是 否 支持 彩色 显示 等 。 这 与 CSS 2.1 里 的 诸如 screen 
和 print 等 媒体 类 型 (Media Type) 的 概念 不 同 。 使 用 媒体 查询 ， 你 不 仅 可 以 针对 特定 的 媒 
体 类 型 设置 一 系列 样式 ， 还 可 以 针对 用 户 显示 终端 的 一 个 或 多 个 特性 来 定义 样式 。 下 面 是 一 
个 例子 : 


@media screen and (max-width: 600px) { 
body { 
font-size: 88%; 
} 


tcontent-main { 





float: none; 
width: 100%; 
} 


说 明 所 有 可 用 的 媒体 特性 都 罗列 在 www.w3.org/tr/css3-mediaqueries/#medial 里 ,并 包含 详细 释 
L, 你 可 能 最 常 需要 用 到 的 是 以 下 特性 : min-width、 max-width, min-device-width, 


max-device-width, orientation (横向 或 纵向 )、color 和 resolution, 


上 面 的 媒体 查询 以 emedia 规则 开始 , 然后 指定 了 媒体 类 型 (本 例 中 是 screen), 接 下 来 
的 and 之 后 跟着 我 们 想 要 匹配 的 特性 ， 称 作 媒 体 特性 (Media Feature)。 我 们 所 指定 的 媒体 特 
性 max-width: 600px FA bier: 以 下 用 花 括 号 舱 套 起 来 的 一 整 段 样式 都 古 针 对 宽度 为 
600px 之 内 的 可 视 区 域 的 。 如 末 可 视 区 域 的 宽度 超过 了 600px, HBA DU R d T4 e r1 Exc Taie S E 
询 的 样式 .。 


说 明 如 果 想 要 在 媒体 查询 里 使 用 all 这 个 媒体 类 型 ， 可 以 完全 去 掉 它 和 连接 词 and 使 代码 更 
短 ， 就 像 这 样 : @media (max-width:600px), 


WEAR AAT BS AEREE, 这 样 能 你 证 所 有 的 样式 邦 在 同一 处 , 便于 调试 
和 维护 ， 也 能 减少 HTTP 的 请 求 。 如 采 你 愿意 ， 也 可 以 用 它 配合 link 元 素 和 eimport 规则 来 引 
AAS TRIES SCF 


@import url(narrow.css) only screen and (max-width:600px) ; 


«link rel-"stylesheet" media-"only screen and 
3 (max-width:600px)" href="narrow.css"> 


D WER KBRN” ORI “Le BES” o 
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这 里 ， 我 在 媒体 类 型 screen 之 前 加 入 了 关键 字 only K IE AE EE ARIA HY il bt as FT BELA A) 
不 文 持 媒体 查询 而 将 样式 全 部 载 和 人。 大 多 数 不 支 持 该 特性 的 六 览 絮 将 不 会 使 用 该 样式 文件 ， 但 
这 样 做 只 是 为 了 多 一 层 额 外 的 保障 。 如 果 你 选择 将 代码 直接 写 入 主 样 式 文件 ， 则 无 需 使 用 关键 
字 only。 

不 管 是 独立 成 额外 的 样式 文件 ， 还 是 和 其 他 CSS 混 写 在 一 起 ， 媒 体 碍 询 对 于 Web 设计 来 说 
都 是 一 款 功 能 强大 的 工具 。 借助 它 , 我 们 可 以 比 以 往 任何 时 候 都 更 精确 地 针对 用 户 的 设备 和 设置 
来 自 定 义 和 调 优 样式 。 这 能 同时 提升 页 面 的 吸引 力 和 可 用 性 。 我 们 可 以 更 改 文本 的 长 度 、 行 忠和 
字号 来 保证 它们 在 不 同 的 宽度 下 都 便于 识别 ; 我 们 可 以 针对 罕 小 的 屏幕 重新 排列 栏目 , 缩放 其 至 
移 除 图 片 以 更 好 地 利用 页 面 留 白 , 并 让 用 户 维 确 歼 得 他 们 想 要 的 内 容 ; 我 们 还 可 以 为 触 屏 的 移动 
设备 放大 链接 来 使 它们 更 方便 用 户 点 击 。 要 做 到 上 述 一 切 , 我 们 不 用 依赖 复杂 的 脚本 串 探 麟 览 器 、 
探测 特性 或 切换 样式 文件 。 只 需 针 对 不 同 的 应 用 场景 编写 不 同 的 CSS 即 可 ， 而 用 到 的 都 是 你 目 
前 已 擎 担 的 知识 。 

接 下 来 让 我 们 一 起 在 示例 文件 中 运用 媒体 查询 特性 设计 一 个 适用 于 宽屏 、 罕 屏 和 移动 设备 的 
页 面 。 
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我 们 首先 针对 宽屏 终端 编写 样式 。 开 始 之 前 ， 请 到 www.stunningcss3.com 下 载 本 章 的 示例 文 
件 并 用 编辑 堪 打 开 media-queries start.html 页 面 ,其 CSS 的 定义 包含 于 页 面 head 里 的 一 个 style 
gba hs 

示例 页 面 在 1200px 左右 的 宽度 会 有 一 些 拉 什 错位 , 因此 我 们 新 增 一 个 仅 针 对 1200px 及 以 上 
宽度 的 媒体 查询 代码 。 请 将 如 下 CSS 代码 加 入 到 head 区 域 的 style WA: 


@media screen and (min-width: 1200px) { 


LA. EE HE TRI CRDI a ETA PES A, DAE Ee a SZ PEI EL. "EG 
Ded bt ae Fe As BATT screen 媒体 类 型 应 用 这 个 媒体 查询 之 内 的 样式 ， 但 仅 当 用 户 的 可 视 区 
域 宽度 大 于 等 于 1200px 时 才 有 效 。 当 然 ， 目 前 这 个 媒体 查询 里 并 没有 任何 样式 ， 只 是 一 对 等 待 
填充 内 容 的 花 括号 。 既 然 在 1200px 的 宽度 下 我 们 有 如 此 大 的 空白 区 域 , 何不 将 布局 由 两 栏 变 成 
三 栏 呢 ? 

为 了 实现 这 个 设想 , 我 们 需要 更 改 导航 条 div 的 位 置 , 还 有 两 个 内 容 div 的 宽度 和 外 边 距 。 
以 下 便 古 当前 上 述 三 个 div 的 样式 代码 ， 它 们 处 于 巡 体 查询 区 块 之 外 : 

#nav-main { 


float: right; 
margin: 40px 0 0 0; 








} 


#content-main { 
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overflow: hidden; 
float: left; 
width: 70%; 
margin-bottom: 40px; 
} 
#content-secondary { 
float: right; 
width: 25%; 
margin-bottom: 40px; 


) 
在 我 们 刚才 新 增 的 媒体 查询 区 块 里 增加 新 的 样式 代码 ， 以 适应 宽度 超过 1200px 的 情况 : 


Qmedia screen and (min-width: 1200px) { 

#nav-main { 
position: fixed; 
top: 136px; 
width: 13%; 
margin: 0; 

) 

#content-main { 
width: 58%; 
margin-left: 18%; 

} 


#content-secondary { width: 20%; } 





说 明 Opera 10.6 上 有 一 个 奇怪 的 问题 : 首先 ， 当 你 将 窗口 拉 伸 至 1200px 以 上 时 , 导航 条 的 div 


会 消失 ; 而 当 你 将 鼠标 移 上 导航 条 本 该 出 现 的 区 域 时 ， 它 又 置 了 出 来 。 针 对 这 个 问题 ， 
目前 还 没有 解决 方案 ,希望 Opera 开发 团队 可 以 尽快 修复 该 问题 。 


这 个 改动 会 将 导航 条 div 定位 到 Logo 下 方 ， 为 创建 第 三 栏 而 做 准备 。 为 了 给 它 腾 出 空间 ， 
ID 3j content-secondary 的 di 宽度 需要 从 25% PRES 20%; fy ID Jj content-main WY div 
宽度 则 需要 从 70% 缩 减 至 58%， 接 着 再 给 它 增 加 左 外 边 距 。 

让 我 们 将 页 脚 区 域 的 关于 (About) 和 贡献 (Credits) div 的 宽度 做 同步 调整 。 把 它们 的 ID 
加 到 媒体 查询 里 #content-main 和 #content-secondary 的 规则 之 后 : 


#content-main, #about { 
width: 58$; 
margin-left: 18$; 

} 


#content-secondary, #credits { width: 20$; } 


UL, 所 有 的 页 面 元 素 都 已 更 好 地 定位 以 适应 更 大 的 宽度 CILE] 6-3)。 REIM, HAA 
沙 伍 的 剖 览 右 打开 预览 。 拉 伸 窗 口 直到 超过 1200px， 你 可 以 看 到 页 面 布局 是 如 何 目 动 地 适应 宽 
度 变化 有 的 。 
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媒体 查询 的 来 龙 去 脉 

媒体 查询 (Media Queries) 是 其 同名 模块 的 一 部 分 , 你 可 以 在 www.w3.org/tr/css3- mediaqueries 
找到 它 。 借助 它 你 不 仅 可 以 根据 screen fe print 等 媒体 类 型 自 定义 样式 , 还 可 以 依据 用 户 显示 
终 荔 的 特性 〈 如 可 视 区 域 的 宽度 ) 来 设置 样式 。 这 些 特 性 被 称 为 “媒体 特性 ， 罗 列 在 
www.w3.org/tr/css3-mediaqueries/#medial 中 ; 并 非 所 有 支持 媒体 查询 的 浏览 器 都 支持 全 部 的 特性 。 

一 个 媒体 查询 可 以 定义 在 一 个 样式 文件 中 , 它 使 用 Gmedia 规则 ,后 跟 媒 体 类 型 和 一 个 ( 含 ) 
以 上 的 媒体 特性 。 除 了 @media 之 和 外， 媒体 查询 还 可 以 用 于 link 元 素 和 eimport 规则 。 

一 个 媒体 查询 可 以 包 念 一 个 或 多 个 媒体 特性 ， 比 如 @media screen and (min-width: 
320px) and (max-width:480px) 。 你 也 可 以 对 同一 个 &media 规则 使 用 多 个 用 各 号 分 陪 开 
RRB, Hote@media screen and (color), projection and (color), iX—,AX 
和 选择 器 分 组 类 似 。 

如 果 你 布 望 在 某 个 媒体 查询 结果 为 非 真 时 就 应 用 某 些 样式 ,可 以 在 媒体 查询 之 前 加 上 单词 
not, Hite@media not print and (max-width:600px) , 

除了 针对 不 同 屏幕 尺寸 更 改 界 面 布 局 以 外 ， 你 还 可 以 将 媒体 查询 用 在 以 下 场景 。 

口 根据 不 同 的 文学 行 长 度 调 整 字号 和 行距 以 确保 文字 更 易 读 ， 请 和 参阅 http://forabeauti- 

fulweb.com/blog/about/proportional leading with css3 media queries, 

O 为 移动 设备 增加 按钮 、 标 签 和 链接 的 字号 以 方便 你 的 手指 在 触摸 屏 上 更 易 触 发 这 些 元 率 。 

O 针对 军 屏 移动 设备 减 小 字号 ， 因 为 用 户 界 面 实 际 上 已 经 被 放大 显示 并 使 得 文字 看 起 来 

比 呆 面 屏幕 上 所 展现 的 文字 更 大 。 
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Q 明确 告诉 小 屏 移 动 设备 用 户 页 内 链接 会 跳 转 到 同 页 面 的 下 方 。 

O 为 诸如 iPhone4 之 类 的 高 分 辨 率 设备 改 用 高 清 图 片 ， 请 参阅 http://dryan.com/articles/ 
posts/2010/6/25/hi-res-mobile-css-iphone-4; 也 可 参考 本 章 后 续 的 示例 。 

口 为 不 同 的 可 视 区 域 显示 不 同 尺 寸 的 图 片 。 

口 为 不 同 尺 寸 的 纸张 应 用 不 同 的 打印 样式 。 


表 6-1 媒体 查询 的 浏览 器 支持 度 
IE Firefox Opera Safaril Chrome 
部 分 支持 ，9+ 部 分 支持 ，3.5+ 部 分 支持 部 分 支持 部 分 支持 


我 将 所 有 的 放 览 如 评 定 为 “部 分 支持 ”是 因为 它们 并 不 文 持 所 有 已 存在 的 媒体 特性 。 具 体 的 
训 览 莫 支 持 情况 由 于 受 篇 幅 限 制 就 不 再 详细 列 出 , AA rf e TEE XE RAS E DUE RE D SPEO. t ACT 
媒体 特性 ， 而 且 包 括 你 将 会 经 党 使 用 的 那 部 分 。 


6.3.1 由 横向 导航 条 变 为 纵向 目录 


尽管 目前 所 有 的 元 素 都 已 定位 到 我 们 所 设想 的 位 置 , 但 其 中 一 些 页 面 元 素 还 可 以 做 进一步 地 
"ei. Feini, SAW div 里 的 1i 元 素 已 设置 成 浮动 并 有 了 左 外 边 距 ， 这样 做 古 为 了 使 它们 水 
平 对 齐 并 保持 彼此 分 离 , 但 这 也 使 它们 无 法 做 到 每 个 一 行 地 衔接 起 来 ,因为 我 们 想 要 实现 一 个 纵 
器 的 目录 。 它 们 还 有 一 些 轻微 的 顶部 圆 角 ， 这 个 效 末 在 横向 排列 时 很 不 错 , 但 当 它 们 彼此 顶部 和 
底部 相连 时 就 不 那么 好 看 了。 现在 当 我 们 需要 将 链接 淡 扮 成 纵 同 的 目录 时 就 不 再 需要 这 些 样式 
了 ， 因 此 我 们 在 媒体 查询 里 用 新 的 样式 去 宪 盖 它们 : 


#nav-main li { 
float: none; 
margin: 0; 








} 

#nav-main a { 
-moz-border-radius: 0; 
-webkit-border-radius: 0; 
border-radius: 0; 





现在 每 个 链接 都 男 起 一 行 并 占据 了 目录 的 全 部 宽度 ( 见 图 6-4), 





CONTACT US 





6-4 ”现在 每 个 链接 都 占据 了 目录 的 全 部 宽度 
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接 下 来 , 让 我 们 把 目录 作为 整体 增加 一 些 样 式 , 好 让 它 的 风格 看 起 来 与 页 面 男 一 边 的 邮件 订 
阅 栏 更 统一 ， 即 拥有 半 透 明 的 育 景 、 轻 微 的 圆 角 和 一 点 很 淡 的 投影 : 


#nav-main { 
position: fixed; 
top: 136px; 
width: 13%; 
margin: 0; 
-moz-box-shadow: 0 0 8px hsla(0,0%, .1); 
-webkit-box-shadow: 0 0 8px hsla(0, a 1); 
box-shadow: 0 0 8px hsla(0,0%,0%, .1); 
-moz-border-radius: 3px; 
-webkit-border-radius: 3px; 
border-radius: 3px; 
background: hsla(0,0%,100%, .3); 
text-align: right; 

} 


由 于 目录 已 经 有 它 自 己 的 背景 色 , 现在 需要 调 痰 链接 自己 的 半 透 明 潮 变 , 这 样 才 不 至 于 因为 
两 种 颜色 的 层 登 而 变 得 大 不 透明 : 


#nav-main a { 
-moz-border-radius: 0; 
-webkit-border-radius: 0; 
border-radius: 0; 
background: -moz-linear-gradient (hsla(0,0%,100%, .3), 
shsla(0,0%,100%,0) 15px); 
background: -webkit-gradient(linear, 0 0, 0 15, 
4. from(hsla(0,0%,100%, .3)), to(hsla(0,0%,100%,0))); 











} 
#nav-main a:hover { 
background: -moz-linear-gradient (hsla(0,0%,100%, .6), 
ahsla(0,0%,100%, .2) 15px); 
background: -webkit-gradient(linear, 0 0, 0 15, 
~- from(hsla(0,0%,100%, .6)), to(hsla(0,0%,100%, .2))); 


这 些 更 改 完成 了 由 水 平 导 航 条 向 纵向 目录 的 转变 〈 见 图 6-5)。 


LOCATION 


CATERING 


CONTACT US 


6-5 ” 左 侧 边栏 的 目录 样式 已 参考 右 侧 的 邮件 订阅 栏 进行 了 重新 定义 


6.3.2 多 列 文本 


界面 根据 可 局 区 域 的 宽 度 测 整 之后 ,用 户 的 主要 抱 优 之 一 便 古 文本 和 了 的 长 度 不 是 太 短 就 是 太 
长 ， 从 而 影响 阅读 体验 或 降低 阅读 欲望 。 这 种 对 于 “ 非 慰 准 的 ”文本 行 长 度 的 个 惧 其 实 征 基于 假 
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设 和 猜想 ， 在 现实 中 并 不 存在 适用 于 所 有 人 的 魔法 值 ， 一 个 用 户 的 年 龄 、 阅 读 级 别 、 母 语 、 征 否 
残 治 等 因素 均 会 影 啊 他 对 最 适合 的 文本 行 长 度 的 看 法 。 


说 明 你 可 以 在 《灵活 Web 设计 》 的 第 1 章 中 学 到 更 多 有 关 文 本 行 长度 的 知识 ,并 可 以 从 www. 
flexiblewebbook.com/bonus.html 免费 下 载 。 


然而 , 文本 行 的 长 度 在 极端 的 边界 条 件 下 并 不 适合 大 多 数 的 读者 , 而 且 也 并 非 永远 都 看 起 来 
那么 具有 吸引 力 。 我 们 目前 可 以 用 来 控制 该 值 的 办 法 之 一 是 使 用 CSS3 所 新 增 的 多 栏 属性 。 这 些 
属性 可 以 帮助 你 将 一 个 HTML 元 素 变 成 多 栏 ， 就 像 是 报纸 的 排版 那样 。 

你 可 以 用 column-count 或 column-width 来 创建 栏目 ,在 使 用 后 者 时 ， 议 蜗 妖 将 根据 目 
前 的 可 用 宽度 来 确定 有 和 多少 个 栏目 (你 也 可 以 同时 使 用 以 上 两 个 属性 ,但 可 能 会 遇 到 未 知 的 问题 ， 
请 阅读 后 面 “ 多 栏 属性 的 来 龙 去 脉 ”来 获得 更 多 相关 信息 )。 

让 我 们 把 第 用 布局 和 宽屏 布局 的 5| 言 段落 变更 为 两 栏 。 请 在 媒体 查询 区 块 的 外 面 找到 现 有 的 
hl + p 规则 ， 它 应 该 在 第 102 行 ， 大 致 在 style 元 素 里 的 第 三 个 部 分 。 现 在 为 其 增加 一 个 
column-count 属性 ， 外 加 三 个 麟 览 姻 私有 版 本 : 


hi +p { 
-moz-column-count: 2; 
-o-column-count: 2; 
-webkit-column-count: 2; 
column-count: 2; 
color: #7F4627; 
texteshadowr -1px -1px 0 hsla(0,09,100$,.0]; 
font-size: 120$; 





) 

H BIETER DU bt as FETCH SRA column-count 属性 , 而 且 Opera 由 于 不 支持 多 栏 特 性 ， 所 
以 也 不 存在 -o-column-count 这 个 属性 ， 但 为 了 向 后 兼容 添加 以 上 两 个 属性 是 一 个 明智 的 选择 。 

该 属性 告诉 基于 Mozilla 和 Webkit 内 核 的 浏览 器 你 希望 将 段落 分 隔 成 两 栏 ， 但 这 些 栏目 的 
盒 容 妖 并 不 是 HTML 文档 树 里 真实 存在 的 元 素 ， 而 是 训 览 如 用 来 填充 内 容 的 虚拟 盒 容 左 。 该 段 
沙 目 前 被 W3C 称 作 多 栏 元 素 (Multicol Element) 一 一 它 是 一 个 多 列 布局 的 容器 。 

你 可 以 用 column-gap 属性 来 控制 栏目 之 间 的 间隔 。 现 在 给 h1 + p 规则 设置 为 1.5em: 


hi + p { 
-moz-column-count: 2; 
-moz-column-gap: 1.5em; 
-o-column-count: 2; 
-o-column-gap: 1.5em; 
-webkit-column-count: 2; 
-webkit-column-gap: 1.5em; 
column-counts 2; 
column-gap: 1.5em; 
color: #7F4627; 








(D Mozilla tH Am 83 SE zF Are AA AN Gecko, 
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text-shadow: -1px -1px 0 hsla(0,0%,100%,.6); 


font-size: 120%; 


} 





如 琳 你 没有 设置 column-gap 属性 值 ， 则 每 个 训 览 右 将 分 别 为 其 指定 默认 值 ， 因 此 了 最 好 还 
是 由 你 自己 进行 明确 地 设置 。 在 这 里 我 们 使 用 了 em 单位 值 ， 因 此 栏目 则 的 空 辽 将 随 着 文字 大 小 





的 变化 而 变化 ， 从 而 使 文字 更 易 阅读 。 
现在 ，5| 言 段落 已 被 分 隔 成 两 栏 , 不仅 应 用 于 普通 布局 ， 也 利用 媒体 查询 将 其 应 用 于 宽屏 的 
布局 (ILE 6-6)。 至 此 就 完成 了 所 有 和 针对 宽屏 版 面包 坊 页 面 的 样式 定义 (ILES 6-7)。 


You deserve a sweet little treat 
every now and then. 


Pellentesque habitant morbi 
tristique senectus et netus et 
malesuada fames ac turpis egestas. 
Vestibulum tortor quam, feugiat 
vitae, ultricies eget, tempor sit amet, 
ante. Donec eu libero sit amet quam 
egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend 


leo. Quisque sit amet est et sapien 


erat wisi, condimentum sed, 


ullamcorper pharetra. Vestibulum 


commodo vitae, ornare sit amet, 
wisi. Aenean fermentum, elit eget 
tincidunt condimentum, eros ipsum 
rutrum orci, sagittis tempus lacus 
enim ac dui. Donec non enim in 
turpis pulvinar facilisis. Ut felis. 


6-6 引言 段落 的 文本 在 Firefox, Safari 和 Chrome 上 变 成 了 两 栏 


LITTLE 


pga 


HOME 
ABOUT 
MENU 
LOCATION 
CATERING 


CONTACT US 


You deserve a sweet little treat 
every now and then. 


Pellentesque habitant morbi tristique ullamcorper pharetra. Vestibulum erat 
senectus et netus et malesuada famesac wisi, condimentum sed, commodo vitae, 


turpis egestas. Vestibulum tortor quam, ornare sit amet, wisi. Aenean fermentum, 


feugiat vitae, ultricies eget, tempor sit elit eget tincidunt condimentum, eros 
amet, ante. Donec eu libero sit amet ipsum rutrum orci, sagittis tempus lacus 
quam egestas semper. Aenean ultricies enim ac dui. Donec non enim in turpis 


mi vitae est. Mauris placerat eleifend leo. pulvinar facilisis. Ut felis. 
Quisque sit amet est et sapien 


e 

a9 hs 
Candies Pastries Desserts 
TRUFFLES, BARS, CARAMELS, CROISSANTS, DANISHES, CAKES, PIES, TARTS, COOKIES, 
AND MORE CREAM PUFFS. AND MORE AND MORE 
Pellentesque habitant morbi Vestibulum tortor quam, Donec eu libero sit amet quam 
tristique senectus et netus et feugiat vitae, ultricies eget. egestas semper. Aenean 
malesuada fames ac turpis tempor sit amet, ante. Donec ultrices mi vitae est. Mauris 
egestas. Vestibulum tortor eu libero sit amet quam placerat eleifend leo. 
quam, feugiat vitae, ultricies egestas semper. Aenean Vestibulum tortor quam, 
eget, tempor sit amet, ante. ultrices mi vitae est feugiat vitae, ultricies eget, 


tempor sit amet, ante. 


About this Page 

This page is for a fictional site. It was created by Zoe Mickley Gilenwater as an exercise in the book Stunning CS$3:A 
z 1 2 lt uses CSS3 media queries to change the design at different screen sizes 

resize your browser window or load it up in à Mobis devior to Check it out. 
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EMAIL NEWSLETTER 
Sign up to get monthly recipes, 
exclusive offers and more 


Email 
== 


MOTHER'S DAY 
SWEET SPECIAL 
DEALS // Pellen tesque habitant 
morbi tristique 
senectus et netus et malesuada 
fames ac turpis egestas. 


NEWS 
Lorem ipsum dolor sit amet, 


Read more at our blog and follow 
us on Twitter 
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说 明 至 此 为 止 的 所 有 修改 都 在 media-queries 1.html 页 面 里 ， 它 在 你 所 下 载 的 本 章 的 示 
例文 件 之 中 。 


1. 多 栏 所 存在 的 问题 

尽管 在 我 们 的 面包 坊 页 面 的 引言 段落 里 CSS3 多 栏 表现 良好 ， 但 它 仍 存在 一 系列 影响 其 实用 
性 的 问题 ， 你 应 该 在 使 用 该 特性 之 前 时 刻 注 意 这 些 问题 。 其 中 一 些 问 题 是 纯粹 的 技术 问题 ， 因 此 
随 着 W3C 完善 规范 和 训 览 器 修复 缺陷 并 增强 支持 度 ， 这 些 问题 会 逐步 削减 甚至 消失 。 它 们 包括 
如 下 内 容 。 

a 均衡 分 配 栏 目的 高 度 。 如 果 没 有 足够 多 的 内 容 用 来 均匀 地 填充 每 个 栏目 ， 那 么 浏览 器 将 
面临 哪个 栏目 会 得 到 更 多 高 度 的 抉择 。 不 同 的 浏览 器 选择 的 结果 也 不 同 ， 而 这 有 时 就 会 
引起 不 可 预料 的 结 末 。 

O 多 栏 共享 相同 的 内 、 外 边 距 和 边框 。 基 于 Webkit 内 核 的 浏览 器 会 让 内 、 外 边 距 和 边框 的 
值 被 多 个 栏目 共享 ， 这 会 造成 一 个 非常 奇怪 的 界面 。 

O 内 容 被 错误 地 分 栏 。 能 够 控制 内 容 分 隔 的 位 置 是 很 重要 的 ， 比 如 你 希望 某 个 标题 与 其 内 容 
呆 在 一 起 ， 可 以 使 用 column-break 属性 实现 这 个 需求 ， 但 目前 没有 任何 浏览 上 器 支 持 它 。 

O 处 理 栏 目 或 内 容 溢出 。 当 内 容 或 栏目 无 法 完全 符合 容器 ( 即 多 栏 元 素 ) 时 会 发 生 溢出 ， 
但 目前 众多 说 览 如 还 无 法 就 处 理 方式 统一 ， 它 可 能 会 癌 右 或 向 下 溢出 ， 或 是 直接 截断 。 
如 果 某 块 独立 的 内 容 对 于 某 个 栏目 来 讲 显得 过 大 (比如 一 张 比 栏目 更 宽 的 图 片 )， 那 么 它 
理应 直接 在 栏目 的 分 隔 处 截断 ,但 是 Firefox 会 让 图 片 溢出 ， 而 Webkit 则 会 在 栏目 边缘 将 
其 截断 ， 并 非 如 规范 中 所 定义 的 那样 。 

a 栏目 内 的 浮动 内 容 。 一 个 多 栏 元 素 内 的 浮动 理应 相对 于 它们 所 出 现 的 栏目 来 定位 ， 但 
Webkit 很 诡异 地 完全 在 多 栏 元素 之 外 浮动 。 

口 打印 时 的 页 码 处 理 。 打 印 页 面 时 ， 如 果 一 个 多 栏 元 素 需 要 多 页 才能 打印 完 ， 那 么 分 栏 内 
容 就 不 应 跨 页 断 开 。 即 : 内 容 必 须 从 第 一 页 开始 进行 分 栏 打印 ， 然 后 内 容 在 次 页 被 衔接 
起 来 继续 分 栏 打 印 ， 直 至 内 容 打 印 完 成 。 早 期 的 Webkit Ail Và 28 JP E SEG TALE, 
但 目前 版 本 的 Webkit 将 分 栏 内容 退 化 成 一 整个 通栏 内 容 进 行 打印 ， 从 而 完全 避 开 了 这 个 


问题 。 




















说 明 列表 中 的 前 两 个 问题 可 以 参考 如 下 网 址 : http;//zomigi.com/blog/deal-breaker-problems-with- 


css3-multi-columns 。 


然而 , 一 些 多 栏 的 问题 更 多 源 于 在 网 页 上 实现 多 栏 这 个 想法 本 里 。 读 者 需要 问 下 党 屏 来 阅读 
完 一 个 栏目 ， 然 后 返回 到 上 面 继续 恋 下 一 个 栏目 ， 如 此 反复 一 一 多 少 显得 单调 无 聊 。 如 采 分 栏 后 
的 内容 高 于 屏 攻 的 可 视 区 域 ， 这 束 不 是 一 个 技术 缺陷 一 一 而 古 可 用 性 上 出 现 了 问题 。 将 网 页 当做 
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印刷 品 来 对 待 通 销 并 不 会 获得 很 好 的 体验 。 如 采 想 了 解 更 多 因 CSS3 多 栏 而 产生 的 可 用 性 或 设计 
占 题 ， 请 阅读 Roger Johanssen 的 “Multicolumn layout considered harmful” (www.456bereastreet. 
com/archive/200509/css3 multicolumn layout considered harmful), Richard Rutter 的 “More on 
multi- column layouts" (www.clagnut.com/blog/1590) 和 Andy Clarke 的 “CSS3 Multi-Column 
Thriller" (www.stuffandnonsense.co.uk/archives/css3 multi-column thriller.html) , 

由 于 有 如 上 的 这 些 同 题 , 我 强烈 建议 大 家 有 限度 地 使 用 多 栏 特性 。 举 个 例子 ,我 认为 对 于 一 
两 个 段落 或 一 个 列表 , 使 用 多 栏 是 没 问 题 的 。 但 我 并 不 认为 它们 适用 于 某 个 与 页 面 等 高 的 区 块 或 
是 包含 诸多 段落 、 元 素 类 型 或 图 片 的 复杂 内 容 。 记 住 我 的 建议 ， 然 后 明智 地 使 用 多 栏 特 性 。 

2. 针对 其 他 浏览 器 的 兼容 方案 

多 栏 是 一 项 典型 的 渐进 增强 技术 , CAU S a tS ERE, 那么 将 会 直接 看 到 文本 的 最 
倪 排 版 一 一 单 栏 。 

如 和 你 非 要 为 疝 不 支持 该 特性 的 浏览 红 找 到 解决 方案 ,有 几 和 亚 脚 本 可 以 将 内 容 分 为 多 栏 。 其 
rH, Cédric Savarese 开发 的 CSS3 Multi Column 脚本 | (www.csscripting.com/css-multi-column) 是 
很 不 错 的 一 个 ， 因 为 它 会 从 CSS 里 读 取 已 经 设置 过 的 多 栏 属 性 值 ， 然 后 使 其 支持 不 支持 该 特性 
HOM at. PRB ATLA Man PIA RETE., 

OQ Columnizer jQuery 插件 ， 作 者 Adam Wulf (http://welcome.totheinter.net/columnizer-jquery- 

plugin) 。 

O MooColumns MooTools 类 ， 作 者 Jason J.Jaeger (http://greengeckodesign.com/moocolumns ) , 

Q Multi-column 脚本 ,作者 Randy Simons (http://randysimons.nl/125,english/129,multi-column-text) 。 

O Column 脚本 ， 作 者 Michael van Ouwerkerk (http://13thparallel.com/archive/column-script) 。 











多 栏 特性 的 来 龙 去 脉 

多 栏 (multi-columns) 是 多 列 布 局 模块 的 一 部 分 ， 可 以 在 www.w3.org/tr/css3-multicol 找到 
它 。 可 以 用 column-count 或 column-width 其 中 之 一 (或 同时 使 用 ) 来 创建 多 栏 。 也 可 以 
用 columns 这 个 简写 属性 同时 设置 上 述 两 个 属性 值 ， 但 Firefox 并 不 支持 。 

column-width 属性 可 以 让 浏览 器 根据 页 面 的 可 用 空间 来 决定 分 成 多 少 个 栏目 。 你 为 
column-width 设置 的 值 实际 上 更 像 是 其 最 小 值 ; 比如 ， 你 对 一 个 250px 宽 的 容器 设置 其 
column-width 属性 值 为 100px, 但 将 column-gap 设置 为 0, 那么 浏览 器 将 生成 两 个 125px 
宽 的 栏目 。 

column-count 属性 则 能 让 你 指定 栏目 的 精确 数量 , 其 宽度 则 根据 可 用 空间 自动 计算 。 如 
果 同 时 设置 了 column-count 和 column-width, ABA column-count 值 就 被 当做 栏目 的 最 
大 值 。 举 个 例子 ， 同 样 对 于 250px 宽 的 一 个 容器 ， 如 果 你 设置 column-width 为 100px, 
column-count 为 3， 那 么 浏览 器 将 生成 两 栏 而 不 是 三 栏 。 

你 可 以 使 用 column-gap 属性 设置 栏目 间隔 ,并 使 用 column-rule 属性 给 每 个 间隔 绘 
制 一 条 坚 线 来 实现 视觉 分 隔 。column-span 属性 则 可 以 让 元 素 跨 越 多 栏 ， 但 目前 尚 无 浏览 
器 可 以 支持 。 
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break before break alter fe break-inside E ^M AH HAHN BOE, 
a v 4L] f 99 ZR RICE LS RAF 

除了 如 未 章 一 样 将 小 段 的 文本 分 隔 成 多 栏 以 外 ,我 认为 对 于 多 栏 特性 , 唯一 安全 的 用 法 就 
是 将 一 个 包含 少量 项 目的 独立 列表 分 隔 成 多 栏 ; 请 参阅 : http://trentwalton.com/2010/07/19/css3- 


multi-column-layout-column-count, 


d 6-2 多 栏 特性 的 浏览 器 支持 度 
IE Firefox Opera Safari Chrome 


不 支持 部 分 支持 不 支持 部 分 支持 部 分 支持 
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针对 宽屏 的 布局 调整 完成 以 后 ,现在 让 我 们 把 目 欧 投 问 罕 屏 终 凯 。 首 移 ， 我 们 要 在 之 前 增加 
的 第 一 个 妹 体 得 询 的 下 方 另外 新 增 一 个 ， 其 目标 是 可 视 区 域 罕 于 760px 的 终 站 


Qmedia screen and (max-width: 760px) { 


} 


X ET Ui Ol BE a Be ais BY AS a ZA AR ARR screen 而 可 视 区 
域 小 于 760px Him. RIMER 760px 这 个 宽度 ?因为 该 宽度 值 可 以 防止 这 些 样式 被 应 用 于 
800x600 分 辨 率 的 时 面 显示 絮 的 最 大 化 窗口 ， 还 包括 768x1024 分 辨 率 的 iPad, dX IK LEZ im 
能 够 应 用 普通 的 样式 ， 因 为 在 上 述 分辨 率 下 界面 能 够 保持 不 错 的 状态 。 但 小 于 760px BJSERE, I 
和 面 就 开始 看 起 来 有 些 拥挤 ， 内 容 洲 出 容 带 的 可 能 性 也 随 之 增加 。 

同样 地 ， 让 我 们 先 拿 导航 条 开刀 一 一 修改 样式 让 它 更 好 地 符合 可 用 的 宽度 。 当 窗口 宽度 过 和 罕 
时 ， 整 个 导航 条 会 男 起 一 行 并 排列 到 logo 的 下 方 ， 这 并 无 大 但， 它 仍 会 保持 癌 右 对 齐 ， 但 当 左 
方 没 有 了 logo 之 后 看 起 来 效 末 不 佳 。 因 此 当 它 在 logo 下方 男 起 一 行 时 ， 我 们 就 把 导航 条 改 为 癌 
左 对 齐 : 


@media screen and (max-width: 760px) { 














#nav-main { 
clear: left; 
float: left; 
} 
#nav-main li { margin: 0 .5em 0 0; } 


} 


你 可 以 从 图 6-8 SHES HERZ. Roe An), (LCRA AG, ru ELA ze 
55 — AA CSS 便 可 以 实现 。 
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pea 
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LITTLE — | Oo B 
pe ERY 
HOME ABOUT MENU LOCATION CATERING CONTACT US 


导航 条 在 罕 小 的 窗口 下 无 法 位 于 logo 旁边 ， 因 此 我 们 使 用 媒体 查询 将 其 由 





接 下 来 ,让 我 们 去 除 ? 言 段落 的 分 栏 效 末 一 当 窗 口 宽度 小 于 760px 时 , 分 栏 看 起 来 非 第 
难看 〈 见 图 6-9)。 在 第 二 个 媒体 查询 区 块 里 书写 一 条 新 的 hl + p 规则 ， 并 在 其 中 将 栏目 数 改 


为 1: 


hi +p { 
-moz-column-count: 1; 
-0-column-count: 1; 
-webkit-column-count: 1; 


column-count: 1; 


You deserve a sweet 
little treat every now 


and then. 


Pellentesque habitant 
morbi tristique senectus 
et netus et malesuada 
fames ac turpis egestas. 
Vestibulum tortor quam, 
feugiat vitae, ultricies 
eget, tempor sit amet, 
ante. Donec eu libero sit 
amet quam egestas 
semper. Aenean ultricies 
mi vitae est. Mauris 
placerat eleifend leo. 
Quisque sit amet est et 
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sapien ullamcorper 
pharetra. Vestibulum 
erat wisi, condimentum 
sed, commodo vitae, 
ornare sit amet, wisi. 
Aenean fermentum, elit 
eget tincidunt 
condimentum, eros 
ipsum rutrum orci, 
sagittis tempus lacus 
enim ac dui. Donec non 
enim in turpis pulvinar 
facilisis. Ut felis. 


在 窄 小 的 窗口 下 ， 一 个 栏目 每 行 仅 能 显示 两 三 个 英文 单词 





改动 之 后 ， 引 言 段 沙里 每 行 的 长 度 看 起 来 合理 多 了 OLA 6-10) ， 但 在 它 正 下 方 并 列 显示 的 
三 个 段落 仍旧 看 起 来 非 笛 罕 小 〈 见 图 6-11) 。 我 们 将 继续 予以 改进 。 


图 6-11 
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You deserve a sweet 
little treat every now 
and then. 


Pellentesque habitant morbi tristique senectus et 


netus et malesuada fames ac turpis egestas. 


Vestibulum tortor quam, feugiat vitae, ultricies eget, 


tempor sit amet, ante. Donec eu libero sit amet quam 


egestas semper. Aenean ultricies mi vitae est. Mauris 


placerat eleifend leo. Quisque sit amet est et sapien 


ullamcorper pharetra. Vestibulum erat wisi, 


condimentum sed, commodo vitae, ornare sit amet, 


wisi. Aenean fermentum, elit eget tincidunt 


condimentum, eros ipsum rutrum orci, sagittis tempus 


lacus enim ac dui. Donec non enim in turpis pulvinar 


facilisis. Ut felis. 





Candies 


TRUFFLES, BARS, 
CARAMELS, AND 
MORE 


Pellentesque ——— 
habitant morbi 
tristique senectus 
et netus et 
malesuada fames 
ac turpis egestas. 
Vestibulum tortor 
quam, feugiat vitae, 
ultricies eget, 
tempor sit amet, 
ante. 


Pastries 
CROISSANTS, 
DANISHES, CREAM 
PUFFS, AND MORE. 
Vestibulum tortor 





quam, feugiat vitae, 
ultricies eget, 
tempor sit amet, 
ante. Donec eu 
libero sit amet 
quam egestas 
semper. Aenean 
ultricies mi vitae 


est. 





Desserts 


CAKES, PIES, 
TARTS, COOKIES, 
E css 
Donec eu libero sit 
amet quam egestas 
semper. Aenean 
ultricies mi vitae 
est. Mauris placerat 
eleifend leo. 
Vestibulum tortor 
quam, feugiat vitae, 
ultricies eget, 
tempor sit amet, 
ante. 


特色 产品 框 在 罕 屏 下 显得 非常 窗 小 ， 只 得 紧 靠 在 一 


图 6-10 在 罕 小 的 窗口 下 将 column-count 的 值 减少 到 1 使 得 引言 段落 既 美观 又 
更 便于 阅读 
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目前 ， 每 个 特色 产品 框 都 是 在 左 侧 浮动 的 一 个 Giv。 取 消 浮 动 将 使 它们 改 为 由 上 至 下 排 
列 ， 而 且 占 据 主 内 容 aiv 的 整个 宽度 。 当 它们 由 上 至 下 排列 时 ， 位 于 每 个 上 部 的 图 片 就 显得 
不 是 非常 美观 ， 而 将 图 片 移 到 左边 来 就 显得 更 为 合理 。 因 此 我 们 给 媒体 查询 增加 如 下 的 新 
规则 : 


.feature { 
float: none; 
width: auto; 
margin: 0 0 1.6em 0; 
padding: 0 0 0 140px; 
background-position: top left; 


说 明 三 张 图 片 都 来 自 Icon Eden 出 品 的 Yummy 免费 图 标 集 (www.iconeden.com/icon/yummy- 


free-icons.html) , 


这 条 规则 取消 了 特色 产品 框 的 浮动 和 宽度 设置 , 并 为 了 给 图 片 腾 出 空间 将 上 内 边 距 替 换 成 了 
左 内 边 距 (因为 使 用 的 是 背景 图 )， 以 便 让 它 显示 于 产品 框 的 左 侧 。 


Candies 


TRUFFLES, BARS, CARAMELS, AND MORE 


Pellentesque habitant morbi tristique 


senectus et netus et malesuada fames ac 





turpis egestas. Vestibulum tortor quam, 
feugiat vitae, ultricies eget, tempor sit amet, 


ante. 


Pastries 
CROISSANTS, DANISHES, CREAM PUFFS, 
AND MORE 


Vestibulum tortor quam, feugiat vitae, 





ultricies eget, tempor sit amet, ante. Donec eu 
libero sit amet quam egestas semper. Aenean 


ultricies mi vitae est. 


Desserts 


oe 
Donec eu libero sit amet quam egestas 
人 = semper. Aenean ultricies mi vitae est. Mauris 
6-12 ”将 特色 产品 框 层 登 起 来 并 将 图 片 改 为 左 侧 显示 之 后 ， 它 在 罕 小 窗口 的 有 限 
空间 里 看 起 来 好 多 了 





placerat eleifend leo. Vestibulum tortor 
quam, feugiat vitae, ultricies eget, tempor sit 


amet, ante. 
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PIE, SABER ED Paice: ARI MRO A Ae T. 增加 了 其 内 容 中 的 长 单 
词 谥 出 的 可 能 性 ,栏目 标题 便 是 其 中 最 “危险 ”的 一 个 ， 因 为 它 全 息 大 写字 母 从 而 占据 了 更 多 的 
位 置 。 我 们 可 以 通过 减 小 字 亏 和 文字 间距 来 降低 其 溢出 的 风险 : 
h3 ( 
font-size: 100%; 


letter-spacing: 0; 


} 


你 可 以 看 到 这 条 规则 所 产生 的 效果 ( 见 图 6-13)。 这 同样 是 一 次 细微 的 修改 ， 却 降低 了 文字 
溢出 的 风险 ， 也 使 文字 更 方便 阅读 了 。 








EMAIL EMAIL 
NEWSLETTER NEWSLETTER 
Sign up to get Sign up to get 
monthly recipes, monthly recipes, 
exclusive offers exclusive offers 
and more. and more. 


subscribe 





subscribe 


7 S ^ ^X. MOTHER'S 
^i ^ A f i T ] \ 

ee) (Dears || DAY 

| DEALS / M44 SPECIAL 
^ e F Á to 一 一 Pe | | 已 n 


MOTHER'S DAY tesque habitant morbi 


tristique senectus et 


SPECIAL netus et malesuada 
Pellen tesque habitant fames ac turpis 
morbi tristique egestas. 


senectus et netus et 
malesuada fames ac 
turpis egestas. 
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至 此 我 们 就 完成 了 针对 罕 屏 版 面包 坊 页面 的 所 有 修改 〈 见 图 6-14)。 保 存 页 面 并 在 尚 不 落伍 
的 说 跷 全 中 打开 ， 缩 放 窗 口 便 可 碍 看 页 面 在 极 午 和 极 宽 条 件 下 的 设计 变化 。 


说 明 至 此 所 有 修改 都 在 media-queries 2.html 页 面 里 ， 它 在 下 载 本 章 示 例文 件 之 中 ， 
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LITTLE Seara: — Pr 

pea 

HOME ABOUT MENU LOCATION CATERING CONTACT US 
EMAIL 

You deserve a sweet = 
Sign up to get 


little treat every now 
and then. 


Pellentesque habitant morbi tristique senectus et 
netus et malesuada fames ac turpis egestas. 
Vestibulum tortor quam, feugiat vitae, ultricies 
eget, tempor sit amet, ante. Donec eu libero sit 
amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo. Quisque sit 
amet est et sapien ullamcorper pharetra. 
Vestibulum erat wisi, condimentum sed, commodo 
vitae, ornare sit amet, wisi. Aenean fermentum, elit 
eget tincidunt condimentum, eros ipsum rutrum 
orci, sagittis tempus lacus enim ac dui. Donec non 
enim in turpis pulvinar facilisis. Ut felis. 


Candies 


Pellentesque habitant morbi tristique 


senectus et netus et malesuada fames ac 





turpis egestas. Vestibulum tortor quam, 
feugiat vitae, ultricies eget, tempor sit 
amet, ante. 


Pastries 
CROISSANTS, DANISHES, CREAM PUFFS, 
AND MORE 


Vestibulum tortor quam, feugiat vitae, 


Wb 


ultricies eget, tempor sit amet, ante. 
Donec eu libero sit amet quam egestas 
semper. Aenean ultricies mi vitae est. 


DA Desserts 


CAKES, PIES, TARTS, COOKIES, AND 
MORE 


Donec eu libero sit amet quam egestas 





semper. Aenean ultricies mi vitae est. 
Mauris placerat eleifend leo. Vestibulum 
tortor quam, feugiat vitae, ultricies eget, 
tempor sit amet, ante. 


About this Page 


This page is for a fictional site. It was created by Zoe Mickley 


Gillenwater as an exercise in the book Stunning CSS3: A Project-based 
Guide to the Latest in CSS. It uses CSS3 media queries to change the 
design at different screen sizes; resize your browser window or load it 
up in a mobile device to check it out. 





monthly recipes, 
exclusive offers 


and more. 
Email 
subscribe 
. MOTHER'S 
(DEALS | eves 
\ '/ SPECIAL 
~ Pellen 


tesque habitant morbi 
tristique senectus et 
netus et malesuada 
fames ac turpis 
egestas. 


NEWS 


Lorem ipsum dolor sit 
amet, consectetuer 


adipiscing elit 


Aliquam tincidunt 
mauris eu risus 


Vestibulum auctor 


blog and follow us on 
Twitter. 


Credits 


WEB FONTS: 
Nadia Serif from Kernest 


ILLUSTRATIONS: 
Yummy by Icon Eden 
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6.5 ”针对 移动 设备 来 改变 布局 


如 东 你 热 袁 于 调整 窗口 大 小 来 测试 罕 屏 下 的 样式 变化 , 你 可 能 会 注意 到 一 一 即使 样式 已 经 按 
是 我 们 的 要 求 进行 过 调整 ， 但 在 诸如 移动 设备 之 类 的 极 罕 宽度 下 ， 界 面 布 局 仍旧 无 法 令 伍 意 。 
那么 ， 还 剩 下 一 件 事 需要 我 们 完成 : 增加 另 一 个 媒体 得 询 ! 

媒体 查询 是 用 来 为 移动 设备 简单 快捷 地 定义 样式 的 好 方法 。 但 是 请 广 意 我 并 疫 有 说 它 是 你 实 
现 移动 版 网 站 的 唯一 方法 , 你 还 可 以 为 你 的 移动 版 出 站 增加 服务 端 脚本 或 使 用 其 他 技术 来 改变 其 
内 容 或 功能 。 尽 管 媒体 查询 已 经 足以 用 来 实现 一 个 小 型 商务 网 站 (比如 本 例 中 的 面包 坊 网 站 ) 的 
移动 版 本 , 但 面 对 一 个 大 而 复杂 的 移动 版 新 闻 网 站 ,我们 或 许 还 需要 使 用 其 他 一 些 额 外 的 技术 来 
显 阁 地 改变 页 面 内 容 、 叶 航 和 其 他 功能 。 而 且 ， 使 用 媒体 查询 来 隐藏 或 切换 大 量 不 同 的 内 容 效 率 
并 不 高 一 一 因为 浏览 磺 仍 旧 会 下 载 它 不 需要 的 内 容 〈 请 参阅 www.quirksmode.org/blog/archives/ 
2010/08/combining media.html) 。 因 此 ， 请 不 要 把 你 体 碍 询 当 做 解决 所 有 移动 版 网 站 设计 的 救命 
稻 章 ， 它 只 征用 来 优化 网 站 的 移动 版 本 的 一 项 工具 。 

当 你 为 移动 版 增加 媒体 查询 时 , 目标 是 哪些 屏幕 尺寸 呢 ? 要 知道 手机 屏幕 的 尺寸 向 直 是 千 奇 
ALE, 但 绝 大 多 数 的 流行 手机 一 一 包括 iPhone 和 诸多 Android 手机 一 一 其 尺寸 部 是 320x480px， 
而 其 他 的 手机 屏 医 很 少 能 大 过 这 个 太 寸 。 反 观 我 们 的 面包 坊 页 面 ， 从 550px 就 开始 变 开 始 出 现 错 
位 ， 因 此 ,将 第 三 个 媒体 查询 的 目标 定 在 550 这 个 宽度 ,将 适用 于 320x480px 以 及 稍 大 于 该 分 辨 
率 的 手机 屏 医 。 

















提示 “如果 你 想 针 对 某 个 特定 的 设备 ,可 以 到 http://cartoonized.net/cellphone-screen-resolution.php 
查找 其 屏幕 尺寸 。 


然而 在 正式 开始 增加 这 条 媒体 查询 之 前 ， 让 我 们 来 聊 聊 有 关 设 备 宽度 的 话题 。 
6.5.1 什么 是 设备 宽度 


在 媒体 查询 里 有 一 个 可 用 的 媒体 特性 叫 作 device-widqth， 除 此 之 外 还 有 min-device- 
width 和 max-device-width。 设 备 宽度 (Device width) 即 实际 设备 和 显示 吉 横 癌 所 能 显示 的 
像素 数量 ， 而 不 是 可 视 区 域 的 宽度 。 它 意味 着 一 台 分 辨 率 为 1280x800px 的 果 面 电脑 ， 基 设备 宽 
度 是 1280px。 当 你 在 媒体 查询 里 指定 device-width 属性 时 , il lias A mail ase ART, 
而 改 为 判断 用 户 的 屏幕 分 辩 率 。 

一 般 来 说 手机 没有 “窗口 ”的 概念 ， 也 可 以 理解 为 “窗口 ”的 大 小 总 是 与 屏幕 尺寸 相等 ， 
此 依据 传统 的 方式 理解 “可 视 区 域 ”其 实 并 不 合适 ， 而 “设备 宽度 ”就 显得 更 为 合理 。 

但 在 这 里 也 会 遇 到 一 些 麻 烦 。 Apple 公司 并 非 始 终 将 其 产品 的 device-width 设置 为 屏幕 在 
横 癌 上 所 能 显示 的 像素 数量 ,这 一 点 与 其 他 大 多 数 手机 都 不 同 。 尽 管 iPhone4 之 前 的 机 型 以 及 iPod 





EH 
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Touch 的 屏幕 尺寸 都 是 320x480 像素 ， 它 们 的 Mobile Safari 会 认定 其 设备 宽度 始终 都 是 320px, 
甚至 当 设 备 正 运行 于 拥有 480px 宽度 的 横 癌 模式 也 是 如 此 。iPad 也 有 同样 的 命运 ,设备 宽 度 始终 
AE 768pXx， 不 省 iPad 的 方 同 如 何 。 而 在 iPhone 4 下 则 更 令 人 感到 困惑 ， 其 分 辩 率 高 达 640x960, 
但 设备 宽度 居然 依旧 保持 为 320px。 

这 并 不 意味 着 你 不 能 使 用 device-width, 但 你 应 该 本 能 地 感觉 到 应 该 使 用 min-width 和 
max-width， 而 不 是 min-device-width 和 max-device-width。 它 们 在 手机 上 的 功能 相同 ， 
但 两 组 属性 之 间 的 主要 差别 在 于 古人 否 会 影响 到 非 手 机 终端 。 举 例 来 讲 ,一 个 max-width 值 为 
550px 的 媒体 查询 将 同时 影响 设备 宽度 小 于 551px 的 手机 和 窗口 罕 于 551px WRAAE. [H— 
^* max-device-width 值 为 550px 的 媒体 查询 则 基本 只 会 影响 到 移动 设备 ， 我 想 分 辨 率 的 宽度 
小 于 551px Bi ri ra p EA EA RE 所 以 ， 两 组 属性 并 无 绝对 的 优 劣 之 分 ， 它们 只 是 为 你 提供 
不 同 目标 下 的 不 同 选 择 胺 了 。 


6.5.2 第 三 次 媒体 查询 














现在 让 我 们 正式 开始 针对 550px 宽 的 窗口 加 入 第 三 次 媒体 查询 : 
@media screen and (max-width: 550px) { 


请 务必 保证 将 这 段 代码 置 于 第 二 段 媒 体 查 询 CHL RT 760px 的 屏幕 ) 的 下 方 ， 因 为 它 
的 代码 同样 会 影响 到 移动 设备 ， 一 个 屏 磊 为 480px 像素 宽 的 移动 设备 是 符合 “小 于 760px” 这 个 
条 件 的 。 如 采 你 将 550px 的 媒体 查询 写 到 了 760px 这 上段 的 前 画 ， 那 么 后 者 的 样式 将 会 覆盖 前 者 。 
这 便 是 CSS 级 联 的 工作 机 制 ， 后 面 的 规则 履 盖 前 面 所 声明 过 的 同类 规则 。 








实用 的 移动 设备 媒体 查询 

我 们 在 移动 设备 的 媒体 查询 中 使 用 了 max-width: 550px, 但 还 有 各 式 各 样 的 媒体 查询 
可 供 你 选择 ,这 一 切取 决 于 你 的 目标 设备 或 用 户 设 置 。 这 里 列举 有 若干 个 示例 ， 布 望 能 够 局 发 
你 写 出 适合 自己 项 目 需 求 的 代码 。 

(min-device-width: 320px) and (max-device-width: 480px) ié M T 320x480px 分 
辨认 的 手机 (4e iPhone 或 Android 设备 ) ， 无 论 其 是 否 处 于 横向 或 纵向 模式 。 

(max-width:320px)i£Jf| FAFA BAN 320x480 2-93 RAJEH, 

(min-wiath:321px) 适 用 于 处 于 横向 模式 的 320x480 2-93 3E FHL, 

人 和 
处 的 方向 模式 无 关 。 

(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: 
landscape) 仅 适用 于 处 于 横向 模式 的 iPad, ‘CAP HEAT RAF LOHR) FP 1024px 
的 桌面 浏览 器 。 
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(min-device-width: 481px) and (max-device-width: 1024px) and (orientation: 
portrait) xi Fl TAF AA EAS iPad, "VG EET AAT EAD) F 1024 HR 
面 浏 览 器 。 

如 果 你 不 希望 两 个 媒体 查询 的 条 件 发 生 重合， 可 以 将 宽度 最 小 值 限定 在 760px， 比 如 : 


@media screen and (min-width: 551px) and (max-width: 760px) 


那么 这 条 媒体 查询 将 仅 针 对 宽度 在 SS 1px 至 760px ZA 2, AIRES REZ) 551px 
的 移动 设备 。 这 件 事 可 好 可 坏 ， 它 取决 于 项 目的 需求 。 但 在 我 们 的 例子 里 ， 它 意味 着 我 们 不 得 不 
在 550px 的 媒体 查询 里 重复 书写 许多 与 760px 那 条 相同 的 样式 规则 ,因为 我 们 希望 两 种 情况 下 大 
量 样式 保持 一 致 。 比 如 , 我 们 希望 5| 言 段落 在 760px 和 550px 两 个 版 本 的 布局 下 都 保持 单 栏 显示 。 
因此 当 这 两 条 媒体 查询 发 生 履 盖 时 ,我们 仅 需要 在 760px 的 媒体 查询 里 定义 单 栏 的 样式 ， 然 后 它 
会 被 继承 到 550px 的 版 本 里 。 

在 我 们 的 示例 页 面 里 , 媒体 查询 之 间 的 覆盖 关系 帮助 我 们 重用 了 诸多 样式 并 让 CSS 显得 更 
简洁 。 然 而 在 其 他 网 站 里 ， 你 可 能 希望 不 同 宽度 下 的 布局 完全 不 同 ， 这 种 情况 下 避免 媒体 查询 
之 加 的 履 盖 则 更 为 合理 。 而 且 将 它们 分 开具 会 带 给 你 更 少 的 烦恼 ， 因 为 你 不 需要 关心 样式 之 间 
的 继承 关系 。 需 要 再 次 重申 的 是 ， 对 于 这 个 问题 并 没有 标 维 答案 ， 它 取决 于 你 想 要 实现 的 具体 

在 本 例 中 , 我 们 将 保持 760px 的 媒体 查询 代码 不 变 , 然后 确保 将 550px 的 版 本 置 于 它 的 下 方 ， 
这 样 宽度 小 于 551px 的 窗口 将 同时 应 用 上 述 两 种 样式 。 

1. 取消 浮动 

我 们 需要 对 移动 版 网 站 所 作 的 主要 改动 便 是 取消 浮动 ， 这 样 整个 页 面 才 会 保持 为 单 栏 。 大 
多 数 移动 版 页 面 都 是 单 栏 的 一 一 仅仅 是 因为 在 如 此 小 的 屏幕 下 并 没有 多 少 空间 可 供 栏 目 并 排 
显示 。 

请 将 如 下 规则 加 入 第 三 段 媒体 查询 里 : 

@media screen and (max-width: 550px) { 

#content-main, #content-secondary { 


float: none; 
width: 100%; 

















} 


#about, #credits { 
float: none; 6 
width: 100%; 
} 
#credits { margin-top: 1.6em; } 
} 
现在 侧 边 栏 改 为 在 主 内 容 栏 的 下 方 显示 ， 而 页 脚 部 分 的 Credits (贡献) 区 块 则 显示 于 About 
(KF) 区 块 之 下 (图 6-15), HEK div 所 增加 的 上 外 边 距 将 保持 页 脚 里 各 个 区 块 彼此 分 离 。 
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图 6-15 在 极 窜 的 可 视 区 域 下 ， 布 局 变 成 了 单 栏 


2. 降低 高 度 


6.5 针对 移动 设备 来 改变 布局 191 


男 一 项 针对 移动 版 页 面 的 实用 改动 便 是 减少 元 素 所 占用 的 纵向 空间 , 即 减少 用 户 在 元 长 的 单 


栏 页 面 中 向 下 深 动 的 次 数 。 


当 使 用 移动 设备 近 距 离 麟 览 时 , 宣传 词 和 5| 言 段落 便 无 需 使 用 这 么 大 的 文字 ,因此 你 可 以 通 


过 增加 hl 和 nl + p 的 样式 规则 来 减少 字号 : 


hi { font-size: 225%; } 
hi + p { font-size: 100%; } 


图 6-16 展示 出 增加 如 上 代码 之 后 的 变化 。 


LITTLE Search: : B 


Dea agy 


HOME ABOUT MENU LOCATION 


You deserve a sweet 
little treat every 
now and then. 


Pellentesque habitant morbi tristique senectus 
et netus et malesuada fames ac turpis egestas. 
Vestibulum tortor quam, feugiat vitae, ultricies 
eget, tempor sit amet, ante. Donec eu libero sit 
amet quam egestas semper. Aenean ultricies mi 
vitae est. Mauris placerat eleifend leo. Quisque 
sit amet est et sapien ullamcorper pharetra. 
Vestibulum erat wisi, condimentum sed, 
commodo vitae, ornare sit amet, wisi. Aenean 
fermentum, elit eget tincidunt condimentum, 
eros ipsum rutrum orci, sagittis tempus lacus 
enim ac dui. Donec non enim in turpis pulvinar 
facilisis. Ut felis. 


LITTLE Search; B 


e e 


HOME ABOUT MENU LOCATION 


You deserve a sweet little 
treat every now and then. 


Pellentesque habitant morbi tristique senectus et netus et 
malesuada fames ac turpis egestas. Vestibulum tortor 
quam, feugiat vitae, ultricies eget, tempor sit amet, ante. 
Donec eu libero sit amet quam egestas semper. Aenean 
ultricies mi vitae est. Mauris placerat eleifend leo. Quisque 
sit amet est et sapien ullamcorper pharetra. Vestibulum 
erat wisi, condimentum sed, commodo vitae, ornare sit 
amet, wisi. Aenean fermentum, elit eget tincidunt 
condimentum, eros ipsum rutrum orci, sagittis tempus 
lacus enim ac dui. Donec non enim in turpis pulvinar 


facilisis. Ut felis. 


6-16 将 引言 段落 的 文字 变 小 降低 了 用 户 在 小 屏 移 动 设备 上 的 滚动 需求 
顺 着 这 条 思路 继续 往 下 看 ,你 会 发 完 在 如 此 罕 小 的 窗口 下 ， 产品 图 标 却 显得 相当 大 ， 而 它 旁 
边 的 文字 本 可 以 占据 更 多 空间 的 。 不 过 驻 运 的 是 ， 我 所 选用 的 这 套 Yummy 图 片 集 包 仿 了 三 种 尺 
寸 : 128px, 64px 和 48px。 我 们 可 以 在 媒体 查询 里 将 背景 图 片 更 换 成 64px 的 版 本 : 
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.feature { padding-left: 70px; } 
#feature-candy { background-image: 
url(images/icon candy 64-trans.png); ) 
#feature-pastry ( background-image: 
url(images/icon pastry 64-trans.png); } 
#feature-dessert { background-image: 
url (images/icon_dessert_64-trans.png); } 


提示 除了 换 成 不 同 的 图 片 之 外 ， 你 还 可 以 使 用 background-size 属性 来 调整 背景 图 片 的 尺 
寸 。 但 这 个 方式 的 缺点 是 会 造成 图 片 有 少量 锯 次 ,但 优点 则 在 于 只 需 载 入 一 套图 片 。 





至 此 ， 特 色 产 品 区 域 占用 了 更 少 的 高 度 而 且 文 字 和 图 片 看 起 来 更 平衡 了 (LE 6-17)。 


Candies Candies 
EU A eee TRUFFLES, BARS, CARAMELS, AND MORE — — 


Pellentesque habitant morbi tristique Pellentesque habitant morbi tristique senectus et 





netus et malesuada fames ac turpis egestas. 
senectus et netus et malesuada fames 


. . 1 | r m, . vi : | ri . 
ac turpis egestas. Vestibulum tortor Vestibulum tortor quam, feugiat vitae, ultricies 


quam, feugiat vitae, ultricies eget, Fes EXHIBE SUETON GEH 


tempor sit amet, ante. 


w ~ Pastries 
= CROISSANTS, DANISHES, CREAM PUFFS, AND 
Pastries rn 


CROISSANTS; DANISHES,CREAM = == FSET o Au SS ode INS al C UM AP T A d ^ nag 
PUFFS, AND MORE Vestibulum tortor quam, feugiat vitae, ultricies 


Vestibulum tortor quam, feugiat vitae, eget, tempor sit amet, ante. Donec eu libero sit 


Kai) 





- 。 amet quam egestas semper. Aenean ultricies mi 
ultricies eget, tempor sit amet, ante. 


Donec eu libero sit amet quam vitae est. 
egestas semper. Aenean ultricies mi "5 
vitae est. Desserts 
és CAKES, PIES, TARTS, COOKIES, AND MORE 
lAN Desserts Donec eu libero sit amet quam egestas semper. 
CAKES, PIES, TARTS, COOKIES, AND Aenean ultricies mi vitae est. Mauris placerat 


MORE eleifend leo. Vestibulum tortor quam, feugiat 


Donec eu libero sit amet quam vitae, ultricies eget, tempor sit amet, ante. 
egestas semper. Aenean ultricies mi 


vitae est. Mauris placerat eleifend leo. 





Vestibulum tortor quam, feugiat vitae, 


ultricies eget, tempor sit amet, ante. 


图 6-17 在 极 窜 情 形 下 减少 特色 产品 区 域 的 图 片 尺寸 使 它们 相对 于 文字 看 起 来 更 为 
PRT 
接 下 来 ， 让 我 们 看 看 邮件 订阅 区 块 。 其 中 的 文本 域 占据 了 它 的 整个 宽度 ， 使 得 同一 行 里 的 标记 
文字 和 按钮 其 至 在 各 大 一 些 的 手机 屏 硕 里 邦 没 有 了 立足 之 地 。 因 此 和 需要 为 其 增加 如 下 的 样式 规则 : 


#form-newsletter * { display: inline; } 





#form-newsletter input[type=text] { width: auto; } 


这 些 修 改 让 邮件 订阅 区 块 显得 更 紧凑 了 ( 见 图 6-18) 。 在 纵向 模式 的 手机 屏幕 里 ， 订 阅 按钮 
将 会 挤 到 第 二 行 ， 但 即使 如 此 整个 表单 总 体 上 仍然 很 好 地 利用 了 空间 。 
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EMAIL NEWSLETTER 
Sign up to get monthly recipes, exclusive offers and 
more. 


Email: = 








图 6-18  SUTEBBTELT el bCER RBS PLUR TEP OL ERE RN EN Tle] —FT T 


最 终 ， 我 们 再 对 页 脚 进 行 一 些 细 小 的 修改 来 降低 其 高 度 。 由 于 还 有 足够 的 空间 可 将 标题 (如 
Web Fonts) 显示 在 详情 (如 Nadia Serif from Kernest) 的 一 旁 ， 所 以 让 我 们 将 页 献 区 块 div 里 的 
dt 元 素 设 置 为 浮动 : 

#credits dt { 

clear: left; 


float: left; 
margin: -.05em .2em 0 0; 





About this Page 


This page is for a fictional site. It was created by Zoe Mickley 
Gillenwater as an exercise in the book Stunning CSS3: A 


Project-based Guide to the Latest in CSS. It uses CSS3 media 
queries to change the design at different screen sizes; resize your 
browser window or load it up in a mobile device to check it out. 


Credits 
WEB FONTS: Nadia Serif from Kernest 
ILLUSTRATIONS: Yummy by Icon Eden 





图 6-19 ”标题 和 详情 被 调整 到 同一 行 之 后 ， 页 脚 的 页 献 区 块 所 占用 的 位 置 变 少 了 

3. BB IE ERR JUR ALIE RE 

在 罕 小 的 移动 屏幕 里 , UCAS RE ZI) A HE BAY RT RE PEZ BESS On, DE T YI IDE FB, 
标题 便 存 在 这 个 问题 。 在 550px FEAT ATP, RRRA ETHER T logo —29, BEKR 
概 400px 宽 时 它们 便 开始 发 生 重合 。 如 果 用 户 设 置 了 更 大 的 字体 ， 那 么 重合 现象 将 出 现 得 更 早 。 

为 了 降低 发 生 重合 的 概率 , 我 们 在 第 三 个 媒体 查询 里 增加 如 下 的 规则 来 减少 搜索 表单 里 文本 
域 的 宽度 : 

#form-search input[type=text] { width: 100px; } 

接 下 来 ,在 550px 的 媒体 查询 下 面 新 增 第 四 条 。 这 条 媒体 查询 针对 的 是 宽度 少 于 401px 的 窗口 : 


@media screen and (max-width: 400px) { 


} 

在 该 媒体 查询 里 增加 一 条 新 规则 , 作用 是 使 搜索 表单 里 的 标签 显示 成 块 元 素 , 这 样 它 将 单独 
占据 文本 域 之 上 的 一 行 : 

@media screen and (max-width: 400px) { 


#form-search label { display: block; } 
] 
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至 此 ,搜索 表单 在 550px 和 400px 宽 的 可 视 区 域 之 下 所 占用 的 空间 更 少 了 ， 甚 至 在 320px 9i 
的 手机 屏幕 里 都 不 会 与 logo REE (图 6-20), 





LIILLE Search: — ae F3 FILTERE Search: 


pea mu ee m 


6-20 ”搜索 表单 现在 同样 占据 了 更 少 的 空间 ， 而 且 在 手机 屏幕 上 与 logo RAE ANY 
可 能 性 更 小 了 (Æ 480px， 右 320px) 


6.5.3 ”针对 高 清 显示 屏 来 改进 界面 


iPhone 4 有 一 种 新 型 的 屏幕 叫 作 “视网膜 屏 ”(Retina Display), 它 比 旧 版 的 Phone 和 iPod Touch 
的 屏幕 分 辨 率 要 高 。 其 分 辨 率 是 640x960, 但 它 所 展示 的 区 域 却 与 旧版 iPhone 相同 ， 这 是 因为 它 
将 两 个 硬件 上 的 像素 看 作 是 一 个 CSS 的 像素 。 这 就 意味 着 你 在 CSS 里 所 定义 的 每 个 像素 都 由 两 个 
实际 的 像素 来 显示 一 一 这 就 是 它 高 清 的 原因 ， 也 是 缘何 其 设备 宽度 仍旧 为 320 (640 的 一 半 )。 

大 多 数 情况 下 ， 你 会 希望 所 有 版 本 的 iPhone 看 到 的 样式 都 相同 , 但 你 也 可 能 希望 利用 iPhone 4 
视网膜 屏幕 的 优势 来 显示 更 高 清 的 图 片 。 比 如 说 ,在 视网膜 屏 上 我 们 的 产品 图 片 与 清晰 的 文字 相 比 ， 
看 起 来 有 一 些 像 素 化 。 

为 了 针对 iPhone 4 设置 样式 ， 你 可 以 使 用 一 个 名 叫 -webkit-min-device-pixelL-ratio 
的 媒体 特性 属性 ， 并 将 其 值 设 置 为 2: 


@media screen and (-webkit-min-device-pixel-ratio: 2) { 


} 

它 让 媒体 查询 仅 当 设备 像素 与 CSS 像素 之 比 为 2: 1 时 才 生 效 ， 目 前 来 说 仅 有 iPhone 4 才 符 
合 条 件 , 但 其 他 Apple 设备 在 未 来 也 可 能 淡 备 上 视网膜 屏 。 因 此 为 了 使 这 条 媒体 查询 更 经 得 起 时 
间 的 考验 ， 我 们 给 它 的 媒体 特性 增加 另 一 个 条 件 来 使 其 仅仅 针对 iPhone 4 的 小 屏 : 

@media screen and (-webkit-min-device-pixel-ratio: 2) 

sand (max-width: 480px) { 

} 




















说 明 2h A AP DBE EAS PET VA RE TRAE AE TLS dpi mJ ARI BAA, PA E Ay Webkit 
浏览 器 并 不 支持 该 特性 一 一 其 中 也 和 包括 iPhone 4 所 使 用 的 Mobile Safari, H4 $ DAA 4 
显示 设备 可 能 支持 它 ， 所 以 在 你 的 目标 设备 上 测试 一 下 ， 看 它 是 否 有 用 ， 


现在 我 们 可 以 开始 为 iPhone 4 提供 更 大 的 图 片 了 , 然后 用 background-size 属性 来 将 其 缩 
小 ， 这 样 可 以 在 同样 的 空间 有 效 地 显示 更 多 的 像 过 信息 。 请 在 新 的 媒体 查询 里 增加 如 下 的 规则 : 
.feature { 


-webkit-background-size: 64px 64px; 
background-size: 64px 64px; 
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#feature-candy { background-image: 
url (images/icon_candy_128-trans.png); } 
#feature-pastry { background-image: 
url (images/icon_pastry_128-trans.png); } 
#feature-dessert { background-image: 
url(images/icon dessert 128-trans.png); } 


这 些 图 片 的 实际 尺寸 (128x128) 比 我 们 希望 它们 所 展示 的 尺寸 (64x64) 整整 大 了 一 倍 。 当 
我 们 使 用 background-size 将 其 缩小 至 64px 来 显示 时 ， 一 个 普通 的 议 贤 强 便 有 了 两 倍数 量 的 
像素 显示 一 个 64px 的 图 片 。 因 此 当 iPhone 4 需要 将 每 个 像素 双 倍 显示 时 ， 它 就 已 经 有 了 两 个 像 
z& n] B Lon 这 样 就 不 会 过 到 将 一 个 像素 放大 两 倍 却 造 成 模糊 的 情况 了 ,图 片 将 看 起 来 更 加 清晰 。 

这 仅仅 是 我 们 针对 iPhone4 优 化 的 其 中 一 步 。 如 采 你 想 了 解 更 多 关于 利用 其 高 请 显示 屏 的 想 
法 , 请 参阅 Luke Wroblewski 的 “Designing for the Retina Display (326ppi)" —3¢ (www.lukew.com/ff/ 
entry.asp?1142) , 











6.5.4 BALKA metat% 


ADR LE FE E A E MRAR, 当 你 将 窗口 缩小 到 一 定 宽度 它 会 如 你 所 想 地 展 
现 出 改进 结 示 ; 但 当 你 使 用 诸如 iPhone 或 Android 之 类 的 智能 手机 来 测试 时 ,你 可 能 会 尺 奇 地 发 
Hi: 所 有 的 媒体 查询 都 不 生效 一 一 页 面 仍 展 示 为 普通 的 样式 ， 即 一 个 全 局 缩放 后 的 两 栏 布局 ( 见 
6-21)。 








图 6-21 在 很 多 手机 设备 上 ， 页 面 展现 为 一 个 两 栏 的 布局 ， 并 未 应 用 我 们 在 第 三 个 媒体 
查询 里 所 设置 的 样式 
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这 是 因为 许多 淹 能 手机 都 使 用 一 个 比 实际 屏 锅 尺寸 大 很 多 的 虚拟 可 视 区 域 , 这 样 做 的 目的 征 
为 了 避免 那些 未 针对 手机 进行 优化 的 页 面 在 320px 的 实际 可 视 区 域 下 被 挤 压 得 变形 。 移动 Web 
开发 专家 Peter-Paul Koch 把 虚拟 的 可 视 区 域 称 作 “布局 可 视 区 域 ”(Layout Viewport), ， 而 实际 的 
可 视 区 域 则 叫 作 “视觉 可 视 区 域 ”(Visual Viewport)。 

当 你 在 手机 上 使 用 布局 可 视 区 域 来 广 贤 页面 时 , 手机 训 览 龙 将 缩小 到 最 高 级 别 ， 这 样 一 来 整 
个 布局 可 视 区 域 刚 好 可 以 符合 屏幕 的 尺寸 。 这 会 使 所 有 东西 看 起 来 很 小 , 但 它 能 保证 界面 布局 看 
起 来 与 使 用 一 个 典型 的 加 面 麟 贤 妖 访问 时 看 到 的 一 样 。 不同 的 手机 齐 蜗 如 使 用 不 同 的 界面 可 视 区 . 
域 的 宽度 值 iPhone 和 iPod Touch 的 Mobile Safari 使 用 980px, Android Webkit 使 用 800px, 
Opera 使 用 850px 一 一 这 里 的 重点 是 当 你 希望 手机 坦白 地 告诉 你 其 屏幕 的 分 状 率 时 ， 它 们 都 假装 
目 己 的 屏幕 比 实 际 所 拥有 的 屏 攻 要 大 。 











说 明 ”如果 你 想 详尽 地 了 解 手 机 的 可 视 区 域 及 其 meta HA, 请 参阅 Peter-Paul Koch 的 文章 一 一 


“A tale of two viewports 一 part two” (www.quirksmode.org/mobile/viewports2.html) 。 


洱 运 的 是 有 个 特殊 的 meta 标签 ， 其 唯一 的 目的 便 是 告诉 手机 训 览 历 你 的 网 站 针对 它们 进行 
了 优化 ， 并 且 可 以 让 你 和 目 定义 界面 可 视 区 域 的 尺寸 和 缩放 级 别 。 

1. 它 如 何 工 作 

这 个 为 手机 而 生 的 标签 被 称 为 “可 视 区 域 meta 标签 ”(Viewport meta Tag), ， 使 用 时 你 需要 
将 其 name 属性 设置 为 viewport。 它 写 起 来 形 如 : 


<meta name="viewport" content=""> 


在 content 属性 内 ， 你 可 以 填 入 任何 用 于 处 理 可 视 区 域 的 指令 。 表 6-3 罗列 了 所 有 可 以 填 
A content 属性 的 指令 。 


表 6-3 ”可 视 区 域 meta 标 签 的 content 属 性 可 用 值 




















| 8088 dE 指示 

width 可 视 区 域 的 宽度 ， 单 位 是 像素 。 其 取 值 可 以 是 一 个 实际 的 数字 或 关键 词 9evice-wiadth 

height 可 视 区 域 的 高 度 ， 单 位 是 像素 。 其 取 值 可 以 是 一 个 实际 的 数字 或 关键 词 device-height 

initial-scale GET RARE TA TRE RAH, RL EMME TRA, 无 任何 
缩放 

minimun-scale 可 视 区 域 的 最 小 缩放 级 别 。 它 表示 用 户 可 以 将 页 面 缩小 的 程度 。 取 值 为 1.0 将 禁止 用 户 缩小 至 
实际 尺寸 以 下 

maximun-scale 可 视 区 域 的 最 大 缩放 级 别 。 它 表示 用 户 可 以 将 页 面 放 大 的 程度 。 取 值 为 1.0 将 禁止 用 户 放大 至 
实际 尺寸 以 上 

user-scalable 者 定 用 户 是 否 可 以 对 页 面 进行 缩放 。 设 置 为 yes 将 允许 缩放 ，no 则 禁止 缩放 


可 视 区 域 meta 标签 由 Apple 发 明 且 疝 未 成 为 标准 。 然 而 ， 除 iPhone Z /hHJ1R E T-9 LOU vi as 
AD SC FF An o 
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2. 添加 到 页 面 中 


现在 让 我 们 把 可 视 区 域 meta 标签 添加 到 面包 坊 页 面 中 。 请 在 页 面 的 nead 中 加 入 如 下 


代码 : 


<meta name-"viewport" content="width=device-width"> 


XXE Er RP LOU E ais PR AEC AG Jy T LR ST i A Fo GEE, ART. SLES TR 


使 用 诸如 iPhone KARUN EAA, HAL PLU S, ee TELA 320px 的 宽度 显示 布局 ， 
证 明 我 们 的 媒体 查询 代码 生效 了 ( 见 图 6-22), 
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6-22 ”增加 了 可 视 区 域 meta 标签 之 后 ，iPhone f LJ 320px 的 宽度 来 显示 该 页 面 ， 不 会 
扩大 至 980px 了 


测试 媒体 查询 
当 你 使 用 媒体 查询 进行 开发 时 ,会 发 现 大 量 的 时 间 花 沉 在 来 来 回回 地 缩放 浏览 器 窗口 以 
确认 样式 是 否 符合 自己 的 预期 上 。 请 允许 我 向 你 介绍 一 些 经 验 玫 助 你 更 快捷 、 顺 利 地 测试 媒 
体 查询 : 


198 ROF 不 同 的 屏幕 尺寸 ， 不同 的 设计 


首先 ， 一 个 名 " ProtoFluid 的 Web 应 用 (http://protofluid.com) 是 专门 为 测试 媒体 查询 而 
生 的 。 填 入 一 个 URL 然后 选择 你 想 要 测试 的 设备 (3e iPhone 或 Motorola Droid) 的 屏幕 尺寸 ， 
它 会 弹出 一 个 窗口 并 强制 它 符 合 你 所 要 求 的 尺寸 ,还 提供 给 你 一 个 按钮 以 便 你 在 横向 和 纵向 模 
式 之 间 来 回 切换 。 但 是 需要 注意 的 是 它 并 不 会 真正 模拟 这 些 设 备 , 仅 是 建立 了 一 个 与 其 屏幕 尺 
寸 相 同 的 窗口 而 已 ,比如 说 你 所 看 到 的 内 容 并 不 会 准确 符合 可 视 区 域 meta 标签 的 设置 。 而 且 ， 
ProtoFluid 也 并 不 支持 device-width， 如 需 测 试 ， 请 改 用 min-width 和 max-width， 接 着 
MM iX, RIG Bee min-device-width X max-device-width, 

3 一 个 我 惯用 的 测试 方法 是 使 用 Firefox 的 Web Developer 扩展 (http://chrispederick.com/ 
work/web-developer) 为 窗口 设置 一 个 与 屏幕 大 小 不 同 的 可 视 区 域 尺 寸 。 展 开 Resize 目录 ， 你 
可 以 增加 任意 多 的 窗口 或 可 视 区 域 尺 寸 。 你 可 以 增加 一 些 符合 第 用 设备 屏幕 尺寸 的 配置 ,比如 
纵向 模式 下 iPhone 屏幕 的 可 视 区 域 是 320 x 356, 横向 模式 下 则 是 480 x 208, 还 有 那些 被 你 作 
为 条 件 写 入 样式 文件 的 媒体 查询 里 的 尺寸 ,然后 就 可 以 通过 对 目录 菜单 里 一 次 简单 的 点 击 来 将 
浏览 器 缩放 至 预 设 的 尺寸 并 预览 效果 了 。 再 次 提醒 : 这 种 方法 仍旧 不 会 真正 模拟 手机 的 行为 ， 
仅 能 方便 你 测试 不 同 的 窗口 宽度 而 已 。 


然而 ,如 末 你 将 iPhone 转 癌 到 横 癌 模式 , 页 面 仍 会 显示 为 320px 宽 , 而 非 480px。 Mobile Safari 
直接 对 页 和 面 进 行 了 放大 ， 而 不 古 真 正 去 改变 界面 可 视 区 域 的 尺寸 。 这 样 做 的 结 末 是 logo 和 其 他 
图 片 都 变 模糊 了 (DLE 6-23)。 
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图 6-23 Æ MERIN F, iPhone 仍旧 以 320px 的 宽度 进行 显示 ， 却 将 界面 放大 至 480px 


还 记得 吗 ? 出 现 这 个 问题 是 由 于 无 论 在 横 癌 还 是 纵 同 模式 ,iPhone 和 iPod Touch 所 返回 的 设 
度 都 是 320px。 为 了 让 Mobile Safari 在 横 问 模式 下 以 480px 的 宽度 显示 布局 可 视 区 域 ， 你 需 
止 它 为 了 符合 窗口 尺寸 便 将 界面 放大 至 320px, 可 以 把 maximum-scale 设置 为 1.0 来 禁止 
器 (和 用 户 ) 放大 界面 至 实际 尺寸 以 上 ， 并 将 其 写 入 meta 标签 : 





备 宽 
要 禁 
i 
pU 


in| 





6.6 针对 其 他 浏览 器 的 兼容 方案 199 


<meta name="viewport" content="width=device-width, 
- maximum-scale=1.0"> 


说 明 iPad 同样 会 识别 且 应 用 可 视 区 域 meta RE, RELFRRTRRARLRAMIEFM, 
不 过 幸运 的 是 , 我 们 所 写 的 meta 标签 并 未 对 iPad 产生 影响 , 其 界面 尺寸 仍旧 是 768px (A 
向 ) 和 1024px (横向 )， 正如 设想 的 那样 。 


现在 ， 当 我 们 使 用 横向 模式 六 览 该 页 面 时 ，Mobile Safari 将 保持 缩放 级 别 在 100%， 即 强制 
屏幕 尺寸 (LE 6-24)。 


布局 可 视 区 域 放大 至 480px 以 符合 屏 
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6-24 ”改变 可 视 区 域 meta 标签 的 maximum-scale 属性 ， 强 制 iPhone 将 横向 模式 
下 的 布局 放大 至 480px 


6.6 ”针对 其 他 浏览 器 的 兼容 方案 


不 支持 媒体 查询 特性 的 广 览 右 (比如 下 8 及 之 前 的 版 本 和 Firefox 3.1 及 之 前 的 版 本 ) 访问 时 
仍 将 显示 普通 版 本 的 页 面 。 尽管 在 极 罕 或 极 宽 状态 下 它 看 起 来 并 不 佳 , 但 绝 大 多 数 的 用 户 并 不 会 
使 用 这 些 尺 寸 访问 。 你 可 以 在 页 面 里 增加 min-wiath fH max-width ADR Ub Ee DU v, d RET XX 
些 极限 情形 ;不 过 请 记得 在 媒体 查询 里 对 不 需要 这 些 设置 的 六 览 硕 加 入 样式 窗 写 。 

当然 ， 这 个 并 不 会 改善 移动 设备 的 访问 体验 。 和 扯 好 大 多 数 流 行 的 手机 都 支持 媒体 查询 
(www.quirksmode.org/mobile/browsers.html ) ,但 是 ,大量 不 支持 媒体 查询 的 手机 也 支持 handheld 
妹 体 类 型 ， 因 此 你 可 以 为 这 些 训 览 左 增 加 专门 为 其 定制 的 样式 文件 。Dominique Hazaél-Massieux 
#2 ‘GH “Return of the Mobile Stylesheet” — x: (www.alistapart.com/articles/return-of-the-mobile- 
stylesheet) 介绍 了 一 个 方法 , "E "TEMBdIS-T-BUDI Vd, tt ae BHF handheld 媒体 类 型 或 媒体 查询 来 
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提供 不 同 的 样式 文件 。 

如 果 这 些 解决 方法 仍旧 无 法 适用 于 你 的 项 目 ， 还 可 以 使 用 JavaScript, Wouter van der Graaf 
所 编写 的 css3-mediaqueries-js (http://code.google.com/p/css3-mediaqueries-js) 便 是 其 中 的 佼佼 者 。 
你 所 要 做 的 只 是 将 脚本 引入 到 页 面 里 一 一 它 将 目 动 分 析 存 在 于 CSS 中 的 媒体 查询 代码 并 使 其 在 
WAS BS AY iH ht zs ELTE, 

你 可 以 在 下 载 的 本 草 的 示例 文件 中 找到 该 脚本 ， 并 将 它 引 入 页 面 的 head m: 


<script src="scripts/css3-mediaqueries.js"></script> 





说 明 本 书 编撰 之 时 ,示例 文件 中 所 和 包 金 的 是 该 脚本 的 最 新 版 本 (发布 日 期 是 2010 年 3 月 )。 但 
当 你 阅读 时 它 可 能 已 经 有 了 最 新 的 版 本 , 请 你 下 载 并 予以 蔡 换 。 可 以 到 http://code.google. 
com/p/css3-mediaqueries-js 查看 版 本 。 


保存 页 面 并 在 原生 并 不 支持 媒体 查询 特性 的 浏览 融 (如 下 8) 中 进行 查看 。 缩 放 窗口 你 便 会 
看 到 界面 布局 开始 根据 媒体 查询 的 设置 进行 变化 了 。 人 简单 如 斯 ， 夫 复 何 求 ! 

对 用 户 来 说 ,使 用 该 脚本 唯一 的 缺点 便 是 会 增加 一 次 额外 的 HTTP 请求， 并 需要 因此 下 载 
16k 的 数据 。 正 因 如 此 ， 你 可 能 希望 仅 当 剖 览 缘 切 实 需要 它 时 才 真 正 ?5| 入 它 。 针 对 IE 6-8， 我 们 
可 以 使 用 条 件 注释 : 

<!--[if lte IE 8]> 


<script src="scripts/css3-mediaqueries.js"></script> 
<![endif]--> 


尽管 诸如 Firefox 3.1 ZARA be ae DICER PERE, [RIP SCRA A), BKE DU 
Was HJJH JEAN AR AFRA, GHC PUR OU ssp TEXANA, (BIA AML E #8 
不 支持 媒体 查询 特性 的 非 下 用 户 错过 这 个 功能 。 


说 明 ”如果 你 正在 使 用 jQuery， 那 么 这 里 有 两 个 插件 可 以 使 媒体 查询 实现 兼容 : Www.protofunc. 
com/scripts/jquery/mediaqueries 和 www.csslab.cl/2009/07/22/jquery-browsersizr, 
6.7 ”大功告成 


至 此 ,面包 坊 页 面 针对 苦 干 不 同 的 窗口 尺寸 都 有 了 其 独特 的 布局 ， 使 得 它 在 桌面 宽屏 显示 器 
和 窗 屏 的 移动 设备 上 既 美 观 又 易于 使 用 (图 6-25). 





说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 media-queries final.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 
示例 文件 之 中 。 
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Vestibulum tortor quam, feugiat vitae, ultricies 
eget. tempor sit amet, ante. Donec eu libero sit 
amet quam egestas semper. Aenean ultrices mi 
vitae est. 


* Desserts 
k CAKES. PIES. TARTS. COOKIES. AND MORE 
Donec eu libero sit amet quam egestas semper. 
Aenean ultricies mi vitae est. Mauris placerat 
eleifend leo. Vestibulum tortor quam, feugiat 
vitae. ultricies eget, tempor sit amet, ante. 
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more. 
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图 6-25 ”面包 坊 页 面 在 不 同 的 尺寸 下 有 着 不 同 的 设计 ( 男 见 彩 插图 6-25) 








布 局 秀 





尽管 一 直 以 来 总 是 鼓励 使 用 CSS 来 控制 页 面 布 局 ， 但 CSS2.1 的 工作 机 制 中 可 以 用 于 布局 的 
部 分 并 不 多 。 开 发 者 通常 都 不 愿意 使 用 绝对 定位 ， 因 为 那 太 不 灵活 ; 浮动 定位 被 广泛 运用 , 但 对 
于 全 页 多 列 布局 来 说 ， 它 总 存在 这 样 那样 的 小 毛病 ， 功 能 上 也 有 很 多 限制 。CSS3 引入 了 许多 的 
布局 机 制 ， 能 够 让 构建 一 个 多 列 布局 变 得 更 加 轻松 ， 同 时 ， 在 CSS2.1 规则 下 比较 难 实 现 的 一 些 
复杂 布局 表现 ， 如 今 也 变 得 更 加 容易 。 虽 然 这 些 特性 还 只 是 实验 性 的 ， 这 一 章 中 你 还 是 可 以 了 解 
到 未 来 的 布局 技术 发 展 趋势 ， 同 时 也 可 以 学 习 到 如 何 立刻 使 用 新 的 弹性 布局 模型 的 实战 技巧 。 





你 将 学 到 

我 们 将 在 一 个 页 面 中 使 用 下 面 这 些 CSS3 技术 来 创建 多 列 布 局 , 并 放置 一 些小 部 件 在 页 面 上 
口 弹性 布局 模型 

L] box-sizing 属性 。 

两 种 CSS3 中 即将 实现 的 布局 在 本 章 也 会 提 及 ， 即 模板 布局 和 网 格 定位 。 


7.1 重大 改变 


在 本 书 中 ， 只 有 那些 能 够 通过 菏 种 渐进 增强 的 方法 实际 运用 到 工作 当中 的 CSS3 技术 才 会 涉 
及 。 但 在 这 了 最 后 一 草 中 ， 将 会 涉及 一 些 训 贤 问 支持 度 不 佳 ， 甚 至 人 没有 被 任何 剖 览 和 奉 文 持 的 CSS3 
属性 , WZA, DURS E) SORT T. ALTRE i SCC XE EIAS IH CAR, n] EA e 4 S PIS R E E 
但 是 ， 了 解 它们 还 是 很 有 必要 的 ， 因 为 这 些 属性 所 提供 的 功能 ， 将 会 使 Web 设计 和 开发 的 过 程 
发 生 巨大 的 改变 。 而且 还 是 有 些 方 法 可 以 实际 使 用 这 些 属性 , Fd T CUR UETE AN SCRERUAU Và, d A 
较 好 的 降级 体验 的 。 

因此 最 后 这 一 章 主要 会 描述 几 年 以 后 构建 Web 站 点 的 方式 。 了 解 了 这 些 新 技术 以 后 ， 你 
以 通过 一 些 有 限 的 方法 在 网 站 中 逐 关 开始 使 用 它们 , 那么 当 这 些 技术 得 到 广泛 的 运用 和 支持 的 时 
fe, PRCA WTR T o 

目前 最 完善 ， 文 持 度 最 好 ， 实 际 可 以 使 用 的 新 布局 技术 通常 称 为 弹性 布局 模型 (本章 将 会 主 
要 描述 这 种 布局 技术 ) 。 弹 性 布局 模型 能 指定 布局 元 率 的 排列 方式 是 水 平 还 是 垂直 的 , 这 些 布 局 元 
素 彼 此 对 齐 的 方式 ， 以 及 这 些 元 素 如 何 使 用 可 用 空间 。 这 上 听 起 来 没有 什么 大 不 了 的 一 CSS2.1 里 
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面 不 是 早已 经 有 属性 可 以 做 到 这 些 了 吗 一 一 但 是 CSS2.1 做 不 到 像 弹性 布局 模型 这 样 轻松 和 灵活 。 


说 明 弹性 布局 模型 并 未 替换 CSS 2.1 的 使 模 型 ， 它 们 可 以 同时 使 用 。 


7.2 无需 浮 动 或 绝对 定位 ， 创 建 多 列 布局 


弹性 布局 模型 5B 入 了 一 个 专用 体系 来 创建 多 栏 或 者 多 列 的 布局 , 这 跟 浮 动 或 者 绝对 定位 截然 
不 同 。 一 个 布局 示例 就 能 很 好 地 说 明 弹 性 布局 模型 的 工作 机 制 , 请 在 www.stunningcss3.com 下 载 
本 章 的 练习 文件 ， 然 后 在 代码 编辑 器 中 打开 flex-box start.html 文件 。 

这 个 页 面 和 第 6 章 的 原型 页 面 是 一 致 的 , 但 媒体 查询 的 部 分 被 移 除了 ,主要 是 想 让 例子 更 人 简 
单一 点 , 而 且 原 本 使 得 各 栏 依次 排列 的 CSS 布局 代码 也 被 去 掉 了 , 这样 所 有 的 div 元 素 都 自 上 而 
下 垂直 排列 ， 因 为 所 有 的 块 级 元 素 默 认 都 是 这 样 排列 的 《图 7-1)。 通 过 使 用 弹性 布局 模型 ， 这些 
块 级 元 素 将 会 再 次 水 平 排列 。 
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7-1 MEH float Bf, div 依次 垂直 排列 
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为 了 让 这 些 区 块 能 够 水 平 排列 ， 痢 先 要 将 它们 的 父 容 絮 的 display 属性 设置 成 pox， 这 是 
CSS3 Ase AWG BAR AB CSS 属性 display 设置 的 一 个 新 值 。 在 这 里 一 个 命名 为 content 的 
div 是 两 个 主要 内 容 区 块 (一 个 是 content-main, 一 个 是 content-secondary) 的 父 容器 ， 
在 第 6 草 中 页 面 上 并 没有 这 个 父 容 龙 ， 之 所 以 添加 它 ， 是 因为 这 是 弹性 布局 模型 的 需要 。 加 入 了 
Aes Za, TERI head 区 样式 表 内 容 里 面 增加 如 下 的 一 条 关于 #content 的 规则 : 











display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 








将 display 设置 成 box 会 导致 div 成 为 W3C REPERA, WRK AS 7G 
Z, AER bias, We div 和 它 的 子 贡 点 都 将 使 用 弹性 盒 模型 来 布局 。Firefox 和 Webkit 核心 的 
浏览 器 一 一 目前 实现 了 对 弹性 盒 模 型 支持 的 浏览 器 一 一 可 以 通过 -moz-box 和 -webkit-box 属性 
来 应 用 这 一 特性 。 对 于 无 浏览 器 前 级 的 box 值 ， 目 前 还 没有 浏览 器 可 以 支持 ，Opera 还 不 支持 
-0o-box， 添 加 的 目的 仅仅 是 为 了 问 后 兼容 。 





Bn) BY) BA ER 
为 了 实现 布局 ， 上 面 的 例子 在 HTML 代码 里 面 添 加 了 一 个 额外 包 衷 容器 来 容纳 名 为 
content-main 和 content-secondary 的 div 容器 ， 这 展示 了 弹性 布局 模型 的 一 个 缺点 : 
相对 浮动 布局 ， 它 需要 增加 额外 的 无 实际 意义 的 识 套 div 容器 。 如 果 要 使 得 谋 套 在 内 的 div 
容器 水 平 排列 , 外 层 的 div 包 庄 容器 必须 设置 display :box 属性 。 相对 弹性 布局 模型 带 来 的 
好 处 而 言 ， 少 量 的 包 训 容器 并 不 是 什么 大 问题 ， 当 然 ， 知 道 这 个 细节 ， 还 是 非常 有 意义 的 。 


IE 9 兼容 性 


在 本 书 撰写 的 阶段 ， 如 果 使 用 -ms- 前 组 的 话 ，]E 9 平台 预览 版 是 可 以 支持 弹性 布局 模型 
的 ， 但 是 当前 的 IE9 beta 它 比 平台 预览 版 要 新 一 一 却 反 而 又 不 支持 了 。 很 明显 微软 在 发 布 
beta 瞩 时 决定 去 挤 这 个 功能 。IE 9 的 最 终 有 版 是 否 会 重新 支持 这 个 特性 ， 是 否 还 需要 使 用 浏览 器 
前 级 ， 这 些 问题 尚 无 定论 。 或 许 当 你 阅读 本 书 时 可 以 尝试 测试 一 下 下 9 正式 版 的 兼容 性 ， 当 
然 为 安全 起 见 ， 不 如 直接 把 所 有 的 浏览 器 前 级 都 加 上 ， 








如 果 想 让 子 元 素 按 照 水 平 排列 , 束 应 该 进一步 使 用 lbox-orient 属性 , AKAPA E a ARA. 


display: -moz-box; 

display: -o-box; 

display: -webkit-box; 
display: box; 
-moz-box-orient: horizontal; 
-o-box-orient: horizontal; 
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-webkit-box-orient: horizontal; 
box-orient: horizontal; 


如 果 容 器 的 display 属性 设置 成 pox iG, Dias SA asi box-orient 属性 自动 设 
置 成 为 inline-axis, 这 在 英语 里 面 的 意思 就 是 水 平 排列 , 跟 horizontal 这 个 值 的 含义 是 一 
样 的 : 这 会 让 容 颖 的 子 元 素 水 平地 并 排 排 列 ， 而 不 是 从 上 至 下 。 所 以 ， 实 际 上 这 里 根本 无 需 
设置 pox-orient 属性 ， 子 元 素 会 自动 水 平 排列 。 这 里 的 设置 只 是 为 了 更 清晰 地 表明 如 何 使 用 
这 个 属性 。 

此 条 规则 能 让 页 面 的 外 观 发 生 奇 妙 的 变化 ，content -main fll content-secondary 这 两 个 
div 现在 比邻 而 居 , 但 是 如 果 发 生 了 意外 呢 ? 比如 这 两 个 div 的 宽度 不 断 增长 到 一 个 足够 的 值 时 ， 
页 面 上 将 无 法 完整 显示 这 两 个 aiv， 这 个 时 候 ， 训 览 器 会 显示 一 个 水 平 的 庐 动 条 〈 见 图 7-2), 





i s Stunni g CSS3 - Mozilla Firefox: 
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7-2 ”两 个 内 容 div 水 平 排列 ， 但 是 由 于 宽度 太 宽 而 无 法 完整 显示 
造成 这 个 现象 的 原因 古 弹 性 容 礁 的 子 元 素 会 增 减 目 身 的 宽度 来 适应 内 部 的 内 容 , 这 被 称 为 
有 大 小 , 跟 没 有 指定 宽度 的 浮动 元 素 所 表现 的 现象 是 一 致 的 。div 中 最 长 的 文本 或 者 最 宽 的 图 片 
决定 了 div 的 宽度 。 很 多 时 候 这 恰好 古 满 足 期 望 的 ， 但 在 这 个 例子 中 则 不 然 。 为 了 解决 这 个 问 
题 ， 可 以 给 每 个 div TRAE width 或 者 max-width 属性 ， 也 可 以 使 用 pox-flex 属性 让 其 中 一 
个 或 者 是 全 部 div 具有 目 适 应 的 宽度 。 


7.2.1 子 元 素 自 适应 
box-flex 属性 实际 上 并 不 能 阻止 子 元 素 保持 固有 大 小 ,但 是 它 会 强制 子 元 素 内 部 的 内 容 自 
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动 适应 而 不 会 把 子 元 素 本 身 撑 大 。 这 就 让 这 些 子 元 素 能 够 弹性 适应 父 容器 的 宽度 。 如 果子 元 素 的 
固有 宽度 之 和 小 于 父 容器 的 宽度 ， 子 元 素 会 自动 增加 宽度 以 填 满 父 容 器 ， 当 相反 的 情况 出 现时 ， 
子 元 素 会 减 小 宽度 。 

具体 增加 或 者 减 小 的 量 取决 于 子 元 素 们 的 固有 宽度 的 比例 ,而 不 是 某 个 绝对 的 数值 。 弹 性 适 
应 的 元 素 是 按照 特定 比例 来 弹性 适应 的 。 举 例 来 说 , 一 个 box-flex (EA) 2 的 元 素 的 宽度 将 会 
倍 于 一 个 box-flex 值 为 1 的 元 素 ， 额 外 的 空间 会 按照 2 : 1 的 比例 分 配 。 

实际 的 例子 能 很 好 地 说 明 这 一 切 。 图 7-3 展示 了 一 个 灰色 的 800 像素 宽 的 aiv， 内 置 了 两 个 
保持 固有 大 小 的 子 元 素 ， 子 元 素 的 宽度 由 内 部 的 文本 决定 ， 其 中 黄色 的 那个 是 99 像素 宽 ， 粉 色 
的 那个 是 493 像素 宽 。 父 容器 的 内 部 还 有 208 像素 的 宽度 是 多 余 的 。 如 果 把 两 个 子 元 素 的 
box-flex 属性 的 值 都 设置 成 1 的话， 它们 就 会 按照 1 : 1 的 比例 瓜分 剩余 的 208 像素 宽 的 空间 ， 
换 句 话 来 说 ， 它 们 平分 了 剩余 的 空间 (图 7-4) 。 如 果 将 粉色 div 的 box-flex 设置 成 2 的话 ， 
它 分 到 的 剩余 空间 就 是 黄色 div 的 两 倍 (图 7-5)。 


09 像素 493 像素 £ 4x)20818 zz 











AbcdefghAbcdefghijklmnopqrstuvwxyz Abcdefghijklmno p. 


7-3 ”黄色 和 粉色 的 aiv 的 宽度 由 内 部 的 内 容 决 定 ， 这 样 灰色 的 div 内 部 还 留 有 
额外 的 宽度 ( 另 见 彩 插图 7-3) 








SPARE 多 余 的 104 像 素 
让 一 一 一 一 [— — —4 
Abcdefgh. AbcdefghijkImnopqrstuvwxyz Abcdefghijklmnop. 


7-4 WA div 各 增加 了 104 像素 的 宽度 〈 另 见 彩 插图 7-4) 


多 余 的 69 像 素 多 余 的 139 像 素 
Abcdefgh. AbcdefghijklmnopqrstuvwxyzAbcdefghijklmnop. 


7-5 由 于 box-flex 的 比例 是 2 : 1， 所 以 黄色 aiv 增加 了 69 像素 ， 粉 色 增加 了 
139 像素 〈 另 见 彩 插图 7-5) 


如 果子 元 素 的 总 宽度 要 比 父 容 器 大 时 ，box-flex 的 工作 原理 是 一 样 的 一 一 超过 的 部 分 会 按 
照 pox-flex 值 设置 的 比例 减 去 。 举 例 来 说 , 在 图 7-6 和 图 7-7 F, 父 容 絮 的 宽度 被 设置 成 为 500 
像素 ， 这 就 比 子 元 素 的 总 宽度 要 小 。 在 图 7-6 中 ， 子 元 素 的 box-flex 的 值 都 被 设置 成 1， 因 此 
它们 的 宽度 同时 减 小 46 像素。 在 图 7-7 中， 粉色 的 div 的 pox-flex 的 值 设置 为 2， 因 此 它 减 
小 的 宽度 是 黄色 的 两 倍 。 





说 明 区 块 因 box-flex 而 被 拉 伸 或 缩小 的 程度 取决 于 它 的 最 大 和 最 小 宽度 ,可 以 直接 指定 也 可 
以 继承 得 来 ， 所 以 有 时 候 最 后 的 宽度 值 可 能 并 非 如 你 所 想 。 
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WC RE 


Jc hi 46 [f 3E 
r3 


AbcdAbcdefghijklmnopqrstuvwxyz Abcdefghijkl 
efgh. mnop. 


LO 
减 掉 46 像 素 


ARG OT ME 


7-6 为 了 适应 500 RRM Ra, PA Poca abi) I 46 像素 





已 始 宽度 
me IG 1 f$ zE 


AbcdeAbcdefghijkimnopqrstuvwxyzAbcdefghijk 
fgh. Imnop. 


LL 


初始 宽度 
7-7 ”由 于 比例 是 2 : 1， 所 以 粉色 的 div 减 小 了 61 像素， 黄色 的 减 小 了 31 像素 


在 本 书 的 例子 里 面 ， 会 通过 把 box-flex 的 值 都 设置 成 1 从 而 让 content-main 和 


content-secondary 两 个 div 的 宽度 均等 地 上 自 适 应 : 


#content-main { 
-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
margin-bottom: 40px; 

} 

#content-secondary { 
-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
margin-bottom: 40px; 


现在 两 个 子 元 素 都 能 和 父 容器 保持 和 谐 了 (图 7-8)。 但 是 Firefox 和 基于 Webkit 的 浏览 
器 在 决定 每 个 子 元 素 的 宽度 时 有 所 不 同 : 图 7-8 是 Firefox 中 的 效果 ， 图 7-9 是 Chrome 中 的 
效果 ， 它 们 的 父 容器 的 宽度 都 是 一 样 的 。 没 法 说 哪个 浏览 器 是 正确 的 ， 也 许 技 术 上 它们 都 错 
T, KHA W3C 在 关于 浏览 右 应 该 如 何 检测 元 素 的 固有 大 小 这 个 问题 上 并 疫 有 提供 足够 的 细 
7H TES 
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图 7-8 ”两 个 div Æ Firefox 下 的 表现 
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图 7-9 ”两 个 div 在 Chome 下 的 表现 ， 请 注意 边栏 相对 于 Firefox 变 宽 了 
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说 明 如 果 爹 子 是 纵向 层 梧 而 不 是 横向 ,那么 box-flex 值 将 影响 其 高 度 而 不 是 其 宽度 。 


制 的 璋 性 空间 与 盒子 布局 的 万 向 一 致 。 


它 所 控 


正 因 为 如 此 ,很 明显 在 这 个 例子 里 把 两 个 div 都 设置 成 自 适应 是 无 法 满足 设计 需求 的 。 相 反 
Hb, 应 该 给 边栏 一 个 特定 的 宽度 ,以 及 为 它 设置 一 个 左边 距 来 让 它 和 主要 内 容 之 间 保 持 一 定 间 距 。 


#content-secondary { 
width: 16em; 
margin: 0 0 40px 40px; 
} 


此 时 边栏 的 宽度 将 会 固定 在 16em， 而 主要 内 容 将 会 自 适 应 扣除 了 边栏 和 边栏 的 边 跑 之 后 的 
宽度 (图 7-10)。 即 便 总 的 布局 模式 不 是 自 适应 的 流 式 布局 ， 这 个 设 定 也 是 有 效 的 ， 举 例 来 说 ， 
如 果 父 容 如 被 设置 成 为 960 像素 定 宽 ， 边 栏 会 占据 16em， 主 要 内 容 区 域 将 会 延展 到 扣除 边栏 宽 
度 的 剩 下 宽度 值 。box-flex 属性 的 作用 是 让 子 元 素 自 适应 父 容器 的 宽度 ， 而 不 是 自 适 应 可 视 区 
域 的 宽度 ， 即 使 父 容器 是 定 宽 的 也 如 此 。 











说 明 至 此 为 止 的 所 有 修改 都 在 flex-box_1.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 文件 中 ， 
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边栏 16em 宽 ， 剩 余 的 部 分 都 由 主要 内 容 区 域 来 填充 
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7.2.2 ”增加 栏目 


这 个 布局 例子 表明 了 弹性 布局 模型 的 一 个 优点 :可 以 轻易 地 把 不 同 的 元 素 按 照 不 同 的 数值 单位 
水 平 排列 。 主 要 内 容 区 域 的 宽度 实际 上 是 按照 自分 比 指定 的 ， 边 距 是 以 像素 指定 的 ， 边 栏 则 是 以 
em 指定 的 。 不 使 用 弹性 布局 模型 的 话 ， 这 种 误 合 模式 也 是 可 以 实现 的 ， 但 是 会 更 困难 、 更 杂乱 。 

相对 地 ， 使 用 弹性 布局 模型 来 创建 一 个 混合 两 栏 布局 是 很 容易 的 ， 下 面 是 一 个 小 结 : 

(1) 将 栏目 的 父 容器 的 display 属性 设置 成 box; 

(2) KRAAN box-orient JARAK horizontal; 

(3) 将 边栏 设 定 一 个 固定 宽度 ; 

(4) 使 用 box-flex 特性 来 让 主要 内 容 栏 荐 充 剩余 的 父 容 磺 空 间 。 

如 于 希望 加 入 更 多 的 栏目 ， 那 么 可 以 为 新 增 的 栏目 指定 一 个 特定 的 宽度 ， 也 可 以 使 用 
box-flex 属性 来 让 它们 目 适 应 宽度 。 你 无 需 为 新 增 的 栏目 来 重新 调整 所 有 的 栏目 的 宽度 一 一 所 
有 的 东西 都 会 目 动 调整 。 

用 个 例子 来 说 明 一 下 ， 如 条 在 底部 新 增 一 个 栏目 ， 那 么 首先 需要 像 内 容 区 域 那 样 ， 为 底部 已 
经 存在 的 两 个 div 设置 弹性 布局 。 首 先 在 #footer 规则 中 添加 daisplay 和 box-orient 属性 : 


#footer { 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
-moz-box-orient: horizontal; 
-o-box-orient: horizontal; 
-webkit-box-orient: horizontal; 
box-orient: horizontal; 
padding: 10px 0; 
border-top: 1px dashed #3C9; 








然后 为 底部 内 已 经 存在 的 两 个 aiv 增加 如 下 规则 : 


#about { 
-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
j 
credits { 
width: 10em; 
margin: 0 0 40px 40px; 
} 


通过 这 些 修改 ， 底 部 的 内 容 已 经 形成 了 两 栏 布局 。 接 下 来 再 将 它 改 变 成 为 三 栏 布局 。 首 先 在 
about 和 credits 这 两 个 div 中 增加 第 三 个 div, M flex-box 2.html 中 复制 以 下 的 HTML 并 粘 
贴 到 练习 文件 当中 : 


<div id="learn-more"> 
<h2>Learn More</h2> 
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<p><a href="http://www.w3.org/TR/css3-mediaqueries/" 
>Media queries</a> are a way of tailoring the site 
design to the characteristics of each user's display, 
using regular CSS embedded in your main style sheet. 
</p> 

</div> 


然后 再 为 这 个 Learn-more Aar HIRITAR o E EA e EAGLE s 


#learn-more { 

width: 10em; 

margin: 0 0 40px 40px; 
} 


在 无 须 对 其 他 CSS 做 任何 改动 的 情况 下 ， 底 部 的 两 栏 布局 已 经 变 成 三 栏 布局 了 (图 7-11), 
没有 必要 调整 about 和 credits 这 两 个 div 的 宽度 或 者 边 距 , 因 为 about 栏 已 经 被 设置 成 为 自 适 应 ， 
它 会 自动 缩放 为 新 增 的 第 三 栏 留 下 足够 的 空间 。 不 论 父 容器 是 固定 宽度 ， 还 是 自 适 应 可 视 区 域 ， 
这 些 设置 都 能 够 正常 工作 。 











About this Pag Learn More Credits 

This page is for a fictional site. It was created by Zoe Mickley Gillenwater as Media queries are a way WEB FONTS: 

an exercise in the book Stunning CSS3: A Project-based Guide to the Latest of tailoring the site design Nadia Serif from Kernest 
in CSS. It uses CSS3 media queries to change the design at different screen to the characteristics of 

sizes; resize your browser window or load it up in a mobile device to check it each user's display, using ILDUSTEATIUNS: 
out. regular CSS embedded in Yummy by Icon Eden 





your main style sheet. 


7-11 about 容器 会 自动 调整 宽度 ， 确 保 父 容器 可 以 容纳 新 加 入 的 栏目 


这 种 易于 装载 和 拆 人 印 栏目 而 不 影响 周围 元 素 的 各 项 设 定 的 能 力 ， 能 够 让 CSS 更 加 简洁 ， 在 实 
际 项 目 中 ,这 也 能 让 工作 更 加 轻松 。 举 例 来 说 ， 如 果 项 目 需要 新 增 一 个 边栏 , 但 是 只 显示 在 特定 的 
页 面 比 如 主页 、 新 闻 页 或 者 关于 我 们 页 中 。 那 么 ,创建 一 个 包含 新 闻 边 栏 的 三 栏 布局 就 跟 两 栏 布局 
一 样 简单 了 ， 也 能 够 大 大 节省 代码 量 。 因 为 页 面 中 的 元 素 会 自动 调整 确保 新 闻 边栏 能 够 顺利 加 入 ， 
这 样 ， 为 两 栏 布局 和 三 栏 布局 创建 不 同 的 CSS 就 没有 任何 必要 了 ， 再 也 无 需 书写 如 下 的 代码 


body.two-col #content { width: 75%; } 
body.three-col #content { width: 60%; } 
body.two-col #nav { width: 25%; } 
body.three-col #nav { width: 20%; } 

















7.2.3 重 定 栏目 顺序 


另外 一 个 使 用 弹性 布局 模型 的 好 处 是 可 以 在 不 修改 HTML 代码 的 情况 下 很 容易 地 重新 排列 
栏目 的 顺序 。 这 里 有 几 个 属性 是 与 这 个 特性 相关 的 。 

最 简单 的 属性 是 box-direction。 举 例 来 说 ， 如 果 希 望 边 栏 在 左边 而 不 是 右边 ， 只 需要 在 
#content 规则 中 设置 box-direction 属性 为 reverse, 然 后 将 边栏 的 左边 距 设 置 成 为 右边 距 : 


#content { 
display: -moz-box; 
display: -o-box; 
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display: -webkit-box; 


display: box; 
-moz-box-orient: 
-o-box-orient: 
-webkit-box-orient: 
box-orient: 
-moz-box-direction: 
-o-box-direction: 
-webkit-box-direction: 
box-direction: 
j 
#content-Ssecondary { 
width: 16em; 
margin: 0 40px 40px 0; 
} 


这 使 得 训 — 


content-main 这 


不 征 目 上 而 下 的 顺序 排列 元 系 。 
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horizontal; 


reverse; 


horizontal; 
horizontal; 
horizontals 


reverse; 
reverse; 
reverse; 


会 水 平 排列 这 些 子 元 素 ， 但 是 会 按照 目 右 至 左 而 不 是 目 左 至 布 的 顺序 。 

个 div Æ HTML 代码 里 面 先 出 现 ， 所 以 剖 
开始 ,然后 再 把 content-secondary 这 个 div 放 在 它 的 左边 (图 7-12 ) 。 
直 而 不 是 水 平 排列 的 话 ， 设 置 box-direction:reverse 的 结果 就 会 


her BoC, (Head 


如 采 这 些 子 元 素 是 垂 
让 说 览 颖 按照 自 下 而 上 而 
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ultricies mi vitae est. Mauris 


placerat eleifend leo. Quisque 
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ullamcorper pharetra. 
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pulvinar facilisis. Ut felis. 





7-12 设置 了 box-direction Jj reverse 以 后 ， 


排列 元 率 





Vi S ie Tc RR A A EAR 


如 果 想 更 细致 地 控制 每 个 子 元 素 的 排列 方式 ， box-ordinal-group 属性 。 当 
box-ordinal-group 属性 设置 为 1 的 上 时候， 元 素 将 会 


在 第 二 位 ， 以 此 类 推 。 


第 一 位 出 现 ， 设 置 为 2 的 时 候 ， 将 会 
这 意味 着 在 本 书 的 例子 中 ， e learn-more 元 素 放 在 最 左边 而 不 
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是 中 则 显示 的 话 ， 只 需要 为 底部 的 三 个 子 元 素 设 置 如 下 的 box-ordinal-group fü: 


#about { 

-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
-moz-box-ordinal-group: 2; 
-o-box-ordinal-group: 2; 
-webkit-box-ordinal-group: 2; 
box-ordinal-group: 2; 

} 

#credits { 
-moz-box-ordinal-group: 2; 
-o-box-ordinal-group: 2; 
-webkit-box-ordinal-group: 2; 
box-ordinal-group: 2; 
width: 10em; 
margin: 0 0 40px 40px; 

} 

#learn-more { 
-moz-box-ordinal-group: 1; 
-o-box-ordinal-group: 1; 
-webkit-box-ordinal-group: 1; 
box-ordinal-group: 1; 
width: 10em; 
margin: 0 0 40px 40px; 

} 


当然 ， 要 把 learn-more 这 个 div 的 左边 距 改 成 右边 距 : 


#learn-more { 
-moz-box-ordinal-group: 1; 
-o-box-ordinal-group: 1; 
-webkit-box-ordinal-group: 1; 
box-ordinal-group: 1; 
width: 10em; 
margin: 0 40px 40px O0; 


Reverse 存在 的 问题 
请 慎 用 box-direction:reverse 设置 ， 这 会 产生 一 些 意料 之 外 的 问题 。 举 例 来 说 ， 县 
体 的 内 容 也 会 自 右 至 左 而 不 是 自 左 至 右 。 另 外 一 些 属性 ， 比 如 控制 摆 放 位 置 或 者 对 齐 方 式 的 
box-align 或 者 box-pack 《本章 梢 后 会 提 到 这 两 个 属性 ) ， 会 因为 reverse 而 产生 不 正常 
的 表现 。 如 果 你 发 现 某 个 元 素 的 表现 和 期 望 正 好 相反 的 时 候 ， 检 查 一 下 是 否 使 用 了 reverse 
设置 ， 那 可 能 是 问题 产生 的 原因 ， 好 好 测试 吧 | 


说 明 至 此 为 止 的 所 有 修改 都 在 flex-box_2.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 文件 中 。 
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现在 learn-more 这 个 div 已 经 在 并 列 的 儿 个 元 素 中 有 了 较 低 的 box-ordinal-group 值 ， 
训 贤 器 会 优先 泻 染 它 。 又 由 于 元 素 的 排列 被 指定 为 水 平 自 左 至 右 排 列 (box-orient 被 设置 为 
horizontal, box-direction 默认 的 设置 为 normal)， 这 就 会 让 learn-more 元 素 演 染 在 左边 
的 第 一 位 (图 7-13), DIS SEDE Poe zb about 和 credits 这 两 个 div 依次 放 在 右边 。 由 于 这 两 个 
div 的 box-ordinal-group 值 是 相等 的 ， 广 览 器 会 通过 它们 在 HTML 源 代码 中 的 顺序 来 决定 
它们 出 现 的 先后 : 代码 在 前 的 div 优先 排列 ， 这 和 那些 没有 指定 这 个 值 的 div 的 排列 次 序 是 一 
样 的 。 
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your main style sheet. 


7-13. 通过 设置 box-ordinal-group 的 值 ， 即 使 元 素 的 HTML 代码 位 置 在 其 他 
元 素 中 间 ， 也 能 优先 显示 
能 够 无 视 元 素 的 源 代码 顺序 而 任意 控制 元 素 的 排列 位 置 ， 这 个 功能 确实 非常 强大 。 能 够 让 最 
重要 的 内 容 始 终 居 于 HTML 代码 的 最 前 部 分 ， 但 十 又 可 以 做 到 这 些 内 容 不 会 显示 在 页 面 的 最 前 
面 ,这 对 于 页 面 的 残障 人 士 可 访问 性 , 多 设备 的 兼容 性 以 及 搜索 引擎 优化 等 都 能 起 到 很 大 的 作用 。 


7.24 多 栏 等 高 


弹性 布局 模型 的 另外 一 个 有 点 微不足道 的 好 处 就 是 能 够 很 轻易 地 创建 高 度 相 等 的 多 个 栏目 。 

在 CSS 问世 前 ， 很 多 设计 师 (包括 我 ) 认为 创建 高 度 相等 的 栏目 的 最 佳 方法 是 使 用 table, 
在 table 的 同一 行 中 的 单元 格 的 高 度 总 会 自动 匹配 的 ， 但 是 依次 排列 的 独立 div 没有 理由 这 样 
做 。 为 了 让 它们 能 够 等 高 显示 ， 设 计 师 和 开发 者 用 了 很 多 CSS 小 技巧 来 解决 这 个 问题 。 这 些 技 
巧 可 能 包括 添加 一 个 或 者 多 个 包 衰 容 如 ,或 者 使 用 背景 图 片 (其 至 有 时 候 只 需要 一 个 简单 的 背景 
色 ， 或 者 仅仅 只 需要 边框 而 不 需要 任何 背景 色 )， 以 及 相对 复杂 的 CSS, 

弹性 布局 模型 如 果 要 创建 多 栏 等 高 的 效果 的 话 ， 还 是 需要 添加 一 个 额外 的 包 正 容 颖 ， 但 是 
不 需要 任何 图 片 (这 样 减少 HTTP 请 求 后 页 面 加 载 会 更 快 )， 它 的 CSS 规则 也 非常 简单 ， 只 需要 
PURRE BAC A ASH box-align 属性 设置 成 stretch, stretch 是 box-align 的 默 
认 值 ， 所 以 如 有 果 为 本 章 的 例子 中 的 两 个 主要 内 容 区 域 设置 背景 色 的 话 ， 你 立刻 就 可 以 看 到 效果 。 


#content-main { 























-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
margin-bottom: 40px; 
background: #dcdcdc; 


#content-secondary { 


width: 


margin: 


16em; 
0 40px 40px D$ 


background: #fcc; 


j 
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保存 页 面 并 在 Firefox, Safari 或 Chrome 中 预览 。 边 栏 的 粉色 背景 一 直 延 伸 到 了 页 面 的 底部 ， 
而 页 面 的 高 度 是 由 内 容 较 多 的 另外 一 个 灰色 背景 的 栏目 决定 的 (图 7-14)。 


EMAIL NEWSLETTER 
Sign up to get monthly recipes, 
exclusive offers and more. 


Sn Oe Py Oa OT 


subscribe 


/ ”AU MOTHER'S DAY 

( SWEET | SPECIAL 

DAR, Pellen tesque habitant 
^— —^ morbi tristique senectus 

et netus et malesuada fames ac 

turpis egestas. 


NEWS 


Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit 


mee nears mauris eu risus 


You deserve a sweet little 
treat every now and then. 


Pellentesque habitant morbi 
tristique senectus et netus et 
malesuada fames ac turpis 
egestas. Vestibulum tortor 
quam, feugiat vitae, ultricies 
eget, tempor sit amet, ante. 
Donec eu libero sit amet quam 
egestas semper. Aenean 
ultricies mi vitae est. Mauris 
placerat eleifend leo. Quisque 
sit amet est et sapien 


ullamcorper pharetra. 
Vestibulum erat wisi, 
condimentum sed, commodo 
vitae, ornare sit amet, wisi. 
Aenean fermentum, elit eget 
tincidunt condimentum, eros 
ipsum rutrum orci, sagittis 
tempus lacus enim ac dui. 
Donec non enim in turpis 
pulvinar facilisis. Ut felis. 


Read more at our blog and follow us 
on Twitter. 








Candies 


TRUFFLES, BARS, CARAMELS, AND MORE 
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac 
turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit 


amet, ante. 


Wb 


Pastries 
CROISSANTS, DANISHES, CREAM PUFFS, AND MORE 


Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec 
eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 


fy 
Desserts 


CAKES, PIES, TARTS, COOKIES, AND MORE 
Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. 
Mauris placerat eleifend leo. Vestibulum tortor quam, feugiat vitae, ultricies eget, 


tempor sit amet, ante. 


图 7-14 ”两 个 内 容 区 块 延伸 到 相同 的 高 度 ， 


stretch 的 缘故 ( 另 见 彩 插图 7-14) 


这 是 因为 pox-align 的 值 默认 就 是 
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^ 局 


再 次 强调 ， 之 所 以 会 这 样 ， 古 因为 box-align 的 值 默 认为 stretch, WRA tcontent 5& 


制 加 上 这 条 规则 ， 那 效 采 也 是 一 样 的 : 
#content { 

display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
-moz-box-orient: horizontal; 
-o-box-orient: horizontal; 


-webkit-box-orient: horizontal; 


box-orient: horizontal; 
-moz-box-direction: reverse; 
-o-box-direction: reverse; 
-webkit-box-direction: reverse; 
box-direction: reverse; 
stretch; 
stretch; 
-webkit-box-align: stretch; 


box-align: stretch; 


-moz-box-align: 
-o-box-align: 


} 


box-align 属性 控制 了 子 元 素 们 相互 排列 时 垂直 于 排列 方 回 的 对 齐 方式 。 如 采 像 例子 中 那 
样 ， 子 元 素 古 水 平 排列 的 ，box-align 控制 的 就 是 垂直 方 问 的 对 齐 方式 ， 如 朱子 元 素 生 垂直 排 





列 的 ， 那 box-align 控制 的 就 是 水 平方 同 的 对 齐 方 式 。 








表 7-1 总 结 了 box-align 的 可 能 值 。 请 注意 , 在 这 里 start 和 end 的 定义 ， 当 元 素 设 置 了 


reverse 方 同 时 ， 是 相反 的 。 举 例 来 说 ， 水 平 排列 的 元 素 ， 
box-align 如 采 设 置 成 start 时 ， 它 将 会 从 底部 开始 对 齐 ， 


然而 ， 现 有 六 览 如 当前 并 没有 名 循 这 一 规 郊 。 











如 果 设 置 了 reverse, MA EH 
而 不 是 通 第 那样 从 顶部 开始 对 齐 。 


HAS UAR 
向 左 对 章 
lal At Ft 
水 平 居 中 对 齐 (左边 和 右边 的 空间 相等 ) 
与 center 相 同 ” 





表 7-1 box-align 的 取 值 
取 值 水 平子 元 素 
start 顶部 对 齐 
end 底部 对 前 
center 垂直 居中 对 齐 (其 顶部 和 底部 的 空间 相等 ) 
baseline 每 个 区 块 的 首 行文 本 基于 文本 的 基本 线 对 齐 ， 
然后 以 最 高 的 子 元 素 为 盒子 的 顶部 边界 
stretch 垂直 拉 伸 以 符合 盒子 的 高 度 





* Firefox 对 垂直 区 块 的 baseline 取 值 等 同 于 statrt， 而 不 是 center。 


7.2.5 “水 平和 垂直 居中 


水 平 拉 伸 以 符合 盒子 的 宽度 


box-align 属性 不 仅 能 够 实现 等 高 的 多 个 栏目 , 而 且 也 能 让 垂直 居中 一 一 这 是 CSS 2.1 几乎 





不 可 能 完成 的 任务 





变 得 容易 实现 ,即使 在 父 元 素 和 子 元 素 的 高 度 都 未 知 的 情况 下 。 另 外 的 一 


个 属性 box-pack 也 让 水 平 居 中 变 得 不 再 需要 传统 的 复杂 技巧 。 
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让 我 们 在 页 面 的 头 部 区 域 尝试 这 两 种 居中 特性 。 对 于 从 第 6 章 就 开始 使 用 的 这 个 页 面 来 说 ， 
此 处 做 了 一 点 轻微 的 改动 : header 容 磺 现在 包 右 了 logo 图 片 和 搜索 表单 ， 而 nav-main ix 4 Es 
则 分 离 出 去 了 。 
1. 让 logo 和 搜索 表单 垂直 居中 
(LX A as BI MELE logo 和 表单 的 时 候 ， 两 个 元 系 的 相对 垂直 居中 更 加 容易 实现 了 。 
首先 把 头 部 区 域 的 display 属性 设置 成 box 使 其 进入 弹性 布局 : 
header { 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 


display: box; 
padding: 20px 0 





如 先前 所 说 ， 即 使 不 设置 box-orient 属性 的 值 ， 弹 性 容 禹 的 子 元 素 也 会 默认 水 平 排列 。 
因此 上 面 的 这 段 CSS 代码 会 使 得 logo 和 搜索 表单 排列 在 同一 行 (图 7-15)。 


LITTLE Search 一 


7-15 logo 和 搜索 表单 成 为 弹性 容器 后 ， 会 按照 水 平顺 序 排列 
为 了 让 搜索 表单 显示 在 屏 硕 的 右 方 而 不 十 硕 着 1ogo 显示 ,需要 让 它 延 伸 以 项 请 头 部 除了 logo 
宽度 以 外 的 所 有 空间 。 同 时 再 设置 text-align 的 属性 值 为 right， 这 样 就 保证 了 搜索 表单 里 
面 的 内 容 都 是 右 对 齐 的 。 请 添加 如 下 规则 来 完成 上 述 工 作 : 


#form-search { 
-moz-box-flex: 1; 























-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 
text-align: right; 
} 
现在 在 Safari 和 Chrome 里 面 搜索 表单 已 经 如 我 们 所 希望 的 那样 处 于 屏幕 的 右 侧 了 (图 7-16)。 
但 是 在 Firefox 上 还 有 点 问题 。 这 是 因为 Firefox 使 用 了 头 部 区 域 的 固有 大 小 ， 从 而 使 得 头 部 区 域 
的 宽度 只 有 它 内 部 元 款 的 宽度 之 和 。 对 于 子 元 素来 说 ， 这 个 判断 是 合适 的 ， 但 是 对 于 父 容 絮 ， 
Firefox 这 么 做 是 有 问题 的 。 这 个 问题 很 容易 修改 ， 只 需要 将 头 部 区 域 的 宽度 设置 成 百分之百 ， 
theader { 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
width: 100%; 
padding: 20px 0; 
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图 7-16 在 基于 Webkit 的 浏览 器 中 ， 搜 索 表单 已 按照 期 望 填 满 了 剩余 区 域 ， 并 且 显 示 
在 右上 侧 


这 会 让 Firefox 停止 缩小 头 部 区 域 的 宽度 ， 而 会 让 头 部 区 域 延伸 填 满 整 个 包 衰 容器。 现在， 
Firefox 的 搜索 表单 也 能 正确 地 显示 在 右上 侧 了 。 

logo 和 搜索 表单 在 水 平方 向 上 已 经 处 于 预期 的 位 置 了 , 现在 来 看 看 如 何 让 它们 在 垂直 方向 上 
也 能 如 预期 排列 。 唯 一 需要 做 的 就 是 将 头 部 区 域 的 box-align 属性 设置 成 为 center, 


#header { 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
-moz-box-align: center; 
-o-box-align: center; 
-webkit-box-align: center; 
box-align: center; 
width: 100$; 
padding: 20px 0; 

j 


通过 这 条 规则 ，logo 和 搜索 表单 就 能 够 在 头 部 区 域 中 垂直 居中 对 齐 〈 图 7-17)。 不 管 表单 的 
字体 大 小 如 何 增 长 ， 或 者 产生 换行 ， 训 跷 右 始 终 会 目 动 调整 保证 元 素 的 垂直 居中 对 齐 。 
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7-17 ”将 头 部 区 域 的 box-align KEK center 可 以 让 它 的 子 元 素 垂 直 居 中 对 前 


2. 让 导航 条 水 平 居中 

现在 ， 将 注意 力 转 移 到 页 面 中 的 另外 一 个 元 素 ， 导 航 条 。 为 了 让 它 在 人 — — 
设置 box-align:center 是 不 管用 的 一 一 因为 它 只 对 水 平 排列 的 元 素 在 垂直 方 辐 的 对 齐 才 能 
作用 ， 或 者 是 垂直 排列 的 元 素 在 水 平方 向 的 对 齐 。 我 们 需要 一 个 新 的 属性 达到 这 个 效果 。 








消失 的 元 素 
如 果 不 是 在 整个 页 面 布 局 而 仅仅 是 在 页 面 的 某 几 个 元 素 上 使 用 弹性 布局 , 那 很 有 可 能 某 个 
元 素 被 同时 赋予 display:box 属性 和 float 或 者 overflow 属性 。 如 果 是 这 样 的 话 ， 可 能 会 
带 来 很 大 的 问题 。 
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Safari 和 Chrome 存在 一 个 缺陷 ， 就 是 会 让 设置 了 float 属性 的 弹性 布局 元 素 从 页 面 上 消 
失 。 虽 然 在 弹性 布局 元 素 上 是 不 可 以 使 用 float 的 ， 但 让 元 素 消 失 也 不 应 该 一 一 而 是 应 该 忽 
略 这 条 不 合理 的 属性 。 对 于 Firefox, 如果 弹 性 布局 元 素 被 赋予 overflow 属性 时 ,也 会 导致 这 
种 消失 。 

这 些 缺 陷 使 得 混合 弹性 布局 和 传统 布局 方式 (为 了 兼容 旧式 浏览 器 ) 变 得 越发 困难 。 举 例 
来 说 ， 例 子 页 面 中 的 导航 条 ， 每 个 11 元素 都 是 设置 成 浮动 的 ， 这 使 得 导航 链接 在 所 有 浏览 器 
中 水 平 排列 。 如 果 期 望 ul 元 素 能 够 包含 它 的 浮动 子 元 素 1i 的 话 ， 就 必须 使 用 第 见 的 浮动 容 
纳 技 术 ， 或 者 让 ul 也 浮动 ， 或 者 为 ul 设置 overflow: auto 或 overflow: hidden, 但 是 由 
于 ul 元 素 现 在 是 弹性 布局 EAE. 对 它 设置 浮动 会 让 它 在 基于 Webkit 的 浏览 器 中 消失 ,但 
是 设置 overflow 又 会 让 它 在 Firefox 中 消失 。 


正好 box-pack 属性 能 够 ELA EWE 过 使 用 它 ， 可 以 让 ul 元 素 移 动 到 mav-main 
这 个 div 的 中 间 。 为 此 , 首先 要 将 nav-main 这 个 div 设置 成 为 浮动 布局 然后 将 它 的 box-pack 
属性 设置 成 center。CSS 规则 如 下 所 示 : 


#nav-main ( 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
-moz-box-pack: center; 
-o-box-pack: center; 
-webkit-box-pack: center; 
box-pack: center; 
overflow: auto; 
margin: 0 0 20px 0; 








} 


接 下 来 ， 还 得 为 Firefox 做 一 系列 的 工作 。 给 aiv 增加 属性 width:100g 来 保证 它 会 填充 整 
个 容 堪 。 同 时 移 除 overflow: auto 声明 来 修复 会 导致 div 消失 的 Firefox fkha (参见 之 前 的 “ 消 
失 的 元 素 ”) 。 


#nav-main ( 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
-moz-box-pack: center; 
-o-box-pack: center; 
-webkit-box-pack: center; 
box-pack: center; 
width: 100%; 
margin: 0 0 20px 0; 

} 


现在 保存 页 面 并 在 Firefox, Safari 和 Chrome 中 观察 效果 。 导 航 条 已 经 在 页 面 中 水 平 居中 显 
示 了 (图 7-18)。 将 box-pack 设置 成 为 center se 
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说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 flex-box final.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 
aTa 
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7-18 通过 设置 box-pack 为 center 可 以 让 导航 条 居中 显示 


换行 显示 子 元 素 





如 果 有 足够 空 它们 会 徐 盖 内 
容 。 这 跟 浮动 0 工作 机 ng * HERE SM EI 宽度 RETAS 自 Ne 和 二 显示 的 特性 有 
oa ， 总 的 来 说 它 还 是 件 好 事 。 举 例 来 说 ， 导 航 条 中 的 1i 元 素 是 浮动 定位 的 ， 所 以 当 
窗口 太 窜 而 无 法 全 部 显示 它们 的 时 候 , 它们 就 会 换行 显示 ,这样 至 少 保证 了 所 有 的 导航 链接 任 
何 时 候 都 在 可 视 区 域 。 如 果 ul 元 素 是 弹性 布局 的 ， 然 后 子 元 素 是 水 平 排列 的 ， 这 时 候 1i 元 
素 是 不 会 换行 的 ， 它 们 会 颈 固 的 保留 在 一 行 ， 即 使 是 窗口 罕 到 无 法 完整 显示 它们 。 
在 这 种 情况 下 ， 如 果 需 要 换行 的 话 , 可 以 设置 box-lines 属性 的 值 为 multiple， 不 幸 的 
是 ， 目 前 还 没有 任何 浏览 器 可 以 支持 。 因 此 ， 目 前 不 要 对 任何 需要 换行 的 元 素 使 用 弹性 布局 。 


X 7-2 总 结 了 box-pack 属性 所 有 可 能 的 值 。 如 同 box-align 一 样 ，start FU ena 的 定义 
FER ar IL J reverse 之 后 将 会 是 相反 的 。 至 少 Firefox 是 遵循 这 个 原则 的 ， 虽 然 基于 Webkit 
的 浏览 绒 没 有 这 样 做 。 


表 7-2 box-pack 的 取 值 





取 值 水 平子 元 素 垂直 子 元 素 

start 位 于 盒子 左 侧 位 于 盒子 顶部 

end 位 于 盒子 右 侧 位 于 盒子 底部 

center 水 平 居中 对 齐 (左边 和 右边 的 空间 相等 ) 垂直 居中 对 齐 〈 其 顶部 和 底部 的 空间 相等 ) 
justify 每 个 子 元 素 忆 间 的 空间 相等 ， 首 元 素 左 边 和 未 元 素 右 相同 


边 无 剩余 空间 。 如 果 只 —^3*, 那么 与 start 相 同 
* Firefox 不 支持 box-pack 必 性 的 justtify 值 ， 它 会 直接 把 它 当 做 start 来 对 待 
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7.3 ”实际 情况 : 现实 可 用 部 分 


ANSE AE, 本 章 上 述 的 大 部 分 工作 目前 来 看 还 仅仅 是 一 种 蓝图 一 一 实际 上 弹性 布局 模型 还 疫 
法 运用 到 实际 工作 中 。 因 为 了 下、Opera 还 有 其 他 一 些 浏 览 右 都 不 支持 它 ， 所 以 眼前 这 个 布局 看 起 
来 真是 乱七八糟 (图 7-19)。 这 可 不 是 使 用 了 border-radius 之 后 在 JIE 上 无 法 显示 圆 角 之 类 的 
问题 ， 这 个 CSS3 属性 会 影响 到 整个 页 面 的 布局 ， 它 带 来 的 问题 可 比 人 简单 的 视觉 效果 大 多 了 。 

最 新 版 本 的 Modernizr 能 够 检测 浏览 器 是 否 支持 弹性 布局 模型 ， 这样 就 可 以 用 它 来 为 不 支持 的 
浏览 器 提供 另外 一 种 布局 方式 如 浮动 等 ,显而易见 的 是 ,这 与 使 用 弹性 布局 模型 的 初衷 是 相 背 离 的 ， 
如 果 已 经 有 了 适应 任何 浏览 器 的 浮动 布局 模型 ， 那 为 什么 还 要 花 时 间 去 创建 弹性 布局 模型 呢 ? 
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图 7-19 FESTA Gee (ANTE 8) 上 ， 页 面 惨不忍睹 
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别 泄气 ! 现实 情况 中 弹性 布局 模型 还 是 有 用 武之 地 的 。 在 上 一 市 讨论 中 ,我 们 说 过 它 可 以 用 
来 创建 全 页 面 的 多 列 布局 因为 它 能 让 布局 元 素 很 好 地 弹性 目 适 应 , 所 以 这 将 是 我 们 未 来 构建 布局 
的 方式 。 在 实际 的 情况 中 也 有 可 能 运用 这 种 布局 。 

举例 来 说 , 弹性 布局 模型 很 容易 将 导航 栏 水 平 居中 , 而 这 个 特性 对 于 不 文 持 的 训 贤 奉 的 降级 
处 理 很 好 。 因 为 此 处 并 没有 使 用 弹性 布局 模型 让 每 个 单独 的 链接 水 平 排列 ， 而 仅仅 是 让 ul 7628 
水 平 大 中 ， 所 以 IE 和 Opera 还 是 能 看 到 一 个 水 平 排列 的 导航 列表 ， 只 是 没有 水 平 居 中 而 已 ， 在 
大 多 数 情况 中 ,这 是 一 个 完全 可 以 接受 的 降级 体验 , 同时 也 让 你 无 需 用 复杂 有 的 方式 实现 一 个 浮动 
定位 的 导航 栏 的 水 平 居 中 。 

除了 水 平 居 中 的 例子 外 ， 下 面 还 有 一 些 其 他 的 实际 运用 弹性 布局 模型 的 例子 。 


7.3.1 弹性 表单 布局 


使 用 弹性 布局 模型 的 一 个 重要 方式 是 用 它 来 布局 表单 元 素 。 请 在 训 览 侣 中 打开 练习 文件 form_ 
start.html。 这 跟 第 6 革 所 使 用 的 文件 是 相同 的 ， 采 用 了 浮动 布局 ， 这 保证 了 在 所 有 浏览 各 上 的 可 
用 性 。 

当 实 蒜 媒体 的 可 视 区 域 小 于 等 于 500 像素 时 , label, 文本 区 域 和 邮件 订阅 按钮 排列 在 一 行 ( 
7-20)。 但 是 表单 并 没有 拉 伸 填充 整个 父 容 絮 的 区 域 。 如 果 文 本 区 域 能 够 调整 拉 伸 程度 以 自动 填 
满 剩余 空间 的 话 ， 视 完 效 果 会 更 好 。 这 在 不 使 用 弹性 布局 模型 的 情况 下 ， 其 他 CSS 技术 也 能 实 
现 这 一 点 , 但 是 需要 一 定数 量 的 秽 套 div 以 及 比较 复杂 的 定位 规则 (参见 http://friedcellcollective. 
net/outbreak/2009/10/04/fluid-searchbox ) 。 
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图 7-20 ”文本 区 域 是 定 宽 的 ， 看 起 来 没有 问题 ， 只 是 没有 拉 伸 填 满 整个 空间 


使 用 弹性 布局 模型 将 会 使 文本 区 域 的 拉 伸 非常 容易 实现 。 首 先 找到 页 面 代码 head 区 域内 的 
样式 的 最 后 max-width: 550px 定义 ， 然 后 删除 下 面 两 条 : 


#form-newsletter * { display: inline; } 








#form-newsletter input[type-text] { width: auto; } 

这 样 就 能 让 元 素 的 定义 回 到 默认 状态 , 接 下 来 将 展示 新 的 弹性 布局 模型 是 如 何 轻 易 地 实现 所 
宽 要 有 的 样式 效 末 的 。 

接着 将 表单 转 成 弹性 布局 : 这 将 使 它 的 子 元 素 默 认 水 平 排列 。 同 时 也 必须 将 它 的 宽度 设置 成 
100%， 这 样 才 能 保证 它 会 拉 伸 填 满 父 容 如 。 请 添加 如 下 的 一 条 新 的 规则 : 


#form-newsletter { 








display: -moz-box; 
display: -o-box; 
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display: -webkit-box; 
display: box: 
width: 100%; 

} 


接 下 来 ， 为 表单 元 素 添 加 一 定量 的 边 距 : 


#form-newsletter * ( 





margin-right: 3px; 
j 


#form-newsletter :last-child { 





margin-right: 0; 


现在 ,整个 表单 看 起 来 比 之 前 好 多 了 ， 如 图 7-20 所 示 , 但 文本 区 域 还 没有 拉 伸 。 这 是 因为 
表 音 元素 目前 还 保持 它们 的 固有 大 小 。 对 于 label 和 按钮 来 说 , 这 是 很 完美 的 ， 本 来 就 期 望 它 
们 的 宽度 和 内 部 文字 内 容 保 持 适 应 ， 但 古 对 于 文本 区 域 而 言 不 是 这 样 。 请 添加 以 下 的 CSS 
规则 : 


#form-newsletter input[type=text] { 











-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 

} 


保存 页 面 并 在 Firefox, Safari 和 Chrome 上 观看 。 将 窗口 的 宽度 缩小 到 550 Ras ABA 
碍 询 ， 然 后 再 看 邮件 订阅 表单 的 表现 ， 继 续 缩 小 窗口 宽度 ， 融 能 够 观察 到 文本 区 域 始 终 能 够 项 充 
可 用 空间 〈 见 图 7-21)。 即 使 父 容 如 被 设置 成 为 固定 宽度 ， 或 者 用 户 使 用 了 特定 的 字体 大 小 从 而 
改变 了 label 和 按钮 的 大 小 ， 文 本 区 域 始终 能 够 通过 目 动 调整 使 用 剩余 的 可 用 空间 。 
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页 面 头 部 的 搜索 字段 也 能 完美 地 使 用 这 个 效 末 ， 可 以 组 合 label 文本 、 文 本 字段 、 提 交 按 
钮 、 其 至 一 个 用 于 高 级 搜索 的 链接 ， 然 后 让 它们 全 部 排 于 一 行 ， 并 使 用 文本 字段 自动 拉 伸 填 满 
可 用 空间 。 表单 元 素 有 些 时 候 在 对 齐 上 很 难处 理 , 此 时 box-align 和 box-pack 会 让 工作 变 得 
iy FEL 

降级 处 理 

在 Firefox 和 基于 Webkit 核心 的 说 览 合 上 订 陪 表单 看 起 来 非常 完美 ， 但 是 在 Opera 和 下 9 上 
却 有 点 糟糕 ， 这 些 广 宽 絮 不 支持 弹性 布局 。 此 时 表单 中 的 每 个 元 素 都 会 独占 一 行 (图 7-22), 
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图 7-22. FERS boas, RET ICRA AT 


STE XX EE FERAI be a he BERE WO ESA eR] Firefox 和 Webkit， 但 在 这 个 例子 
HD AE HE 92 A PEE HY dl ak a te BE PES, PA AEE Firefox 和 Webkit 中 重 载 样式 而 
LEA Sc FPR bt at JC LAS ATI 
TE AN XC TE SH HE f Jeg BP o ar POR v e Lk Ae ACS ECE TNR, BE #Eorm- 
newsletter input [type=text] 规 则 添加 width:auto 届 性 ， 然 后 为 #form-newsletter * 
规则 添加 display: inline Ry. 


#form-newsletter * { 
display: inline; 








margin-right: 3px; 
} 
#form-newsletter input[type=text] { 





-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 

width: auto; 


这 实际 上 就 是 把 之 前 去 掉 的 两 条 规则 给 恢复 了 , 这 样 在 Opera 8H IE9. 上 表单 元 素 重 新 又 排 在 
一 行 了 。 这 里 本 来 可 以 直接 保持 原状 的 ， 之 所 以 先 去 掉 再 加 上 是 为 了 让 这 部 分 工作 产生 的 效果 更 
加 明晰 。 

这 样 做 唯一 的 问题 就 是 将 表单 元 素 设 置 成 display:inline 之 后 ， 会 重 载 之 前 对 弹性 布局 
的 定义 ， 从 而 导致 弹性 布局 失效 。 为 了 避免 这 一 点 ， 需 要 在 display:inline 之 后 再 添加 对 
display:box 的 定义 ， 包 括 带 浏览 右前 绥 的 定义 : 


#Fform-newsletter * { 
display: inline; 











display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
margin-right: 3px; 

} 


设置 display HJ box fala, inline 值 就 被 重 载 挥 了 , 这样 弹性 布局 的 定义 就 不 会 失效 。 
不 支持 弹性 布局 的 六 览 副 目 然 也 无 法 理解 box 这 个 值 ， 这 样 它 就 会 继续 使 用 inline 这 个 值 ， 
ZA ASE display 定义 也 由 于 同样 的 原因 被 忽略 了。 
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通过 这 些 样 式 ， 使 用 不 支持 弹性 布局 的 训 览 帮 的 用 户 也 能 看 到 如 图 7-20 所 示 的 同样 内 容 的 
表单 布局 ， 就 是 在 第 6 草 中 所 使 用 的 适合 所 有 训 览 右 的 样式 ， 而 在 支持 弹性 布局 的 训 虎 大 上 将 会 
看 到 增强 版 本 的 表单 样式 ， 如 图 7-21 所 示 。 尽 管 缺少 训 览 各 文 持 的 问题 可 能 会 导致 实际 项 目 中 
无 法 将 弹性 布局 应 用 于 整个 页 面 布局 , 但 是 在 之 前 的 这 些 例子 里 面 , 没有 理由 不 应 用 这 个 布局 技 
术 做 一 些小 的 少 进 增强 。 


说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 form finalhtml 页 面 里 ， 它 在 你 下 载 的 本 章 的 示例 文 
件 中 。 


7.3.2 JB de Rh 


使 用 弹性 布局 模型 Fs] ET SC AN BRIN AN SC RAY D B, i HJ a 2 8— 1 EY Bl ze AE GITE DEC 
AU OR. FIRE B DC B DP] 383 15 ae TH. OU TRE HE JE K 39 [3] XE. E REI A BR Jp, BE D H 
的 主体 内 容 的 长 度 不 足以 将 底部 区 域 推 到 可 视 区 域 的 底部 (图 7-23), MEHA CSS3 的 话 ， 也 能 
实现 这 个 特性 , 但 是 当然 , 这 会 比较 复杂 。( 参 见 www.cssstickyfooter.com/using-sticky-footer-code. 


html， 这 里 描述 了 一 种 方法 ， 也 有 其 他 方法 的 引用 链接 。) 
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图 7-23 ”左边 的 页 面 中 ， 底 部 区 域 始 终 显示 在 可 视 区 域 的 底部 ， 右 边 的 页 面 中 底部 
区 域 只 是 显示 在 内 容 区 域 的 底部 
使 用 阐 性 布局 模型 来 创建 底部 区 域 黏附 效 末 的 关键 是 使 用 box-flex 属性 让 底部 区 域 之 前 
的 div 弹性 目 适 应 。 这 将 会 让 这 个 div 目 动 拉 伸 填充 可 视 区 域 中 的 所 有 可 用 空间 。 如 来 此 时 没 
有 足够 的 拉 伸 空间 ， 换 句 话 说 ， 页 面 的 长 度 其 实 已 经 够 长 ， 其 至 超过 了 可 视 区 域 ， 那么 在 底部 区 
域 之 前 的 div 会 保持 目 己 的 固有 高 度 ， 底 部 区 域 也 会 照 弟 直接 显示 在 其 后 。 
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如 末 想 自己 试 试 的 话 ， 只 需要 在 编辑 右 中 打开 文件 sticky-footer.html。 这 跟 第 6 章 的 页 面 是 
一 样 的 ， 只 是 增加 了 一 个 名 为 content 的 div 3€ 813€ content-main 和 content-secondary。 同 时 也 移 
除了 一 些 内 容 来 使 页 面 变 得 比较 短 ， 此 时 底部 区 域 紧 贴 在 内 容 区 域 的 下 方 ， 和 可 视 区 域 的 底部 之 
间 还 有 一 定 距 离 (图 7-24), 
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图 7-24 底部 区 域 正好 显示 在 内 容 区 域 的 下 方 ， 而 不 是 可 视 区 域 的 底部 





如 果 希 望 不 管 在 什么 情况 下 整个 页 面 的 布局 至 少 要 和 可 视 区 域 一 样 高 ， 那 么 首先 要 保证 
body fH html 这 两 个 元 素 能 够 拉 伸 到 和 可 视 区 域 一 样 高 ,， 即使 在 它们 不 包含 任何 内 容 的 情况 下 。 

为 html 元 素 创 建 规则 , 将 height 属性 设置 为 100%, 然后 为 已 经 存在 的 body 规则 也 添加 
height :100g 属 性 : 
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html ( 
height: 100%; 
} 
body 4 
height: 100%; 
margins 0; 
padding: 0; 
background: url (images/background.jpg) ; 
color: #666; 
font-family: "Segoe UI", Segoe, Calibri, Arial, 
~ sans-serif; 
font-size: 100%; 
line-height: 1.6; 
} 
接 下 来 ， 使 用 display REK GR div 设 定 成 弹性 布局 ， 然 后 使 用 box-orient 属性 设 
定 它 的 子 元 素 垂直 排列 。 然 后 将 其 最 小 高 度 设置 成 100s， 这 样 它 会 始终 保持 至 少 和 可 视 区 域 
一 样 高 : 
#wrapper { 
display: -moz-box; 
display: -o-box; 
display: -webkit-box; 
display: box; 
-moz-box-orient: vertical; 
-o-box-orient: vertical; 
-webkit-box-orient: vertical; 
box-orient: vertical; 
min-height: 100%; 
margin: 0 6%; 
} 
LKFR 88 HJ = fC header, content 和 footer 一 一 垂直 排列 。 这 本 来 
怀 是 它们 的 默认 排列 方式 ， 所 以 这 些 规则 不 会 带 来 任何 训 览 龙 下 的 外 观 改 变 ， 不 管 它们 是 否 
支持 弹性 布局 。 但 是 添加 这 些 规则 的 目的 是 要 让 包 奢 容 絮 的 任意 子 元 泰 具有 弹性 自 适 应 的 
能 力 。 
而 在 这 个 例子 里 面 ， 被 期 望 具有 弹性 自 适应 能 力 的 子 元 素 束 是 content 这 个 div， 因 此 可 以 
为 它 添加 新 的 规则 ， 将 box-flex 属性 设置 成 1: 


#content { 














-moz-box-flex: 1; 
-o-box-flex: 1; 
-webkit-box-flex: 1; 
box-flex: 1; 

j 


现在 , 扣除 了 头 部 区 域 和 底部 区 域 的 固有 高 度 之 后 , ANE EL BES d EL TEL Hl e IP PNE DC Tk 
的 可 用 高 度 ,， 这 三 个 区 域 的 高 度 之 和 忆 会 至 少 寺 于 可 视 区 域 的 高 度 。 因 此 ， 底 部 区 域 将 会 定位 在 
可 视 区 域 的 底部 ， 而 不 紧 贴 内 容 区 域 (图 7-25)。 
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7-25 ”底部 区 域 正好 显示 在 可 视 区 域 的 的 部 ， 而 不 是 内 容 区 域 的 底部 


不 支持 弹性 布局 的 浏览 器 会 简单 地 忽略 这 些 规则 , 所 以 页 面 还 是 如 前 所 示 , 效果 没有 改变 (就 
如 当前 大 部 分 页 面 所 表现 的 那样 )， 底 部 区 域 正好 紧 贴 在 内 容 区 域 的 下 方 。 使 用 这 些 浏览 器 的 用 
户 完全 不 知道 他 们 所 看 见 的 内 容 显 示 方 式 和 其 他 人 会 有 所 不 同 。 底 部 区 域 黏附 的 效果 ， 是 对 使 用 
高 级 浏览 器 的 用 户 的 额外 装饰 性 加 分 。 





说 明 完成 版 页 面 所 展示 的 效果 代码 都 在 footer-queries final.html 页 面 里 ， 它 在 你 下 载 的 本 章 的 
示例 文件 中 。 


弹性 布局 模型 的 来 龙 去 脉 
你 可 以 在 www.w3.org/tr/css3-flexbox 找到 弹性 布局 模型 (Flexible Box Layout) 。 比 起 
CSS2.1 所 提供 的 布局 技术 ， 弹性 布局 模型 所 创建 的 布局 在 处 理 对 齐 和 间距 等 问题 上 具有 更 强 
大 的 能 力 。 
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如 果 要 使 用 这 个 布局 模型 ,只 需要 将 一 个 包 庄 容器 的 display 属性 设置 成 box, 这 是 CSS3 
引入 的 一 个 新 值 。 接 下 来 就 可 以 使 用 一 系列 的 新 属性 来 控制 包 衷 容器 内 的 子 元 素 的 排列 布局 万 
X (参加 表 74), 
除了 本 章 中 已 经 给 出 的 例子 以 外 ， 弹 性 布局 模型 还 可 以 用 于 以 下 场景 。 
口 使 用 box-direction 或 者 box-ordinal-group 属性 让 重要 的 内 容 始 终 居 于 HIMEL 代 
码 的 前 面 ， 但 是 无 需 让 它 在 视觉 上 显示 在 页 面 的 前 面 
O 使 用 box-ordinal-group 让 博客 的 某 个 帖子 置顶 ， 即 使 这 个 帖子 在 HTML 代码 中 并 
不 是 第 一 条 。 
口 创建 一 个 全 宽 的 水 平 导 航 ， 使 用 box-flex 让 每 个 按钮 都 弹性 自 适 应 宽度 。 
O 可 以 让 导航 条 中 处 于 和 所 标 悬 停 状 态 或 者 当前 选中 状态 的 按钮 自 适 应 占据 所 有 的 剩余 
用 空间 ， 这 个 效果 可 以 参见 www.IE 7nomore.com/fun/flexiblenav , 
口 图 片 库 效 果 ， 让 每 一 行 不 同 山 度 的 缩 略 图 垂直 居中 对 齐 。 
O 视频 播放 器 控制 按钮 效果 ， 进 度 条 是 弹性 自 适 应 的 ， 占 据 了 扣除 播放 控制 按钮 之 外 的 
所 有 剩余 空间 ; 参见 http://clubajax.org/css3-layouts-the-flexible-box-model-basics , 
Q 让 内 容 图 片 和 对 应 的 图 片 描 述 文字 相 邻 重 直 居中 。 
这 些 例子 的 大 部 分 在 实际 项 目 中 还 不 能 使 用 ， 因 为 还 存在 很 多 的 浏览 器 不 兼容 的 情况 以 
及 其 他 缺陷 ， 但 是 如 果 为 特定 的 浏览 器 创建 一 个 应 用 的 话 ， 比 如 10S 上 的 Safari， 还 是 值得 
ee 


表 7-3 ”弹性 布局 模型 的 浏览 器 支持 度 


IE Firefox Opera Safari Chrome 


不 文 持 部 分 支持 ， 需 要 -moz- 不 支持 部 分 支持 ， 需 要 -webkit- 部 分 支持 ， 需 要 -webkit- 


前 Hil 2x 前 Hil 2x 前 Hil 2x 


表 7-4 弹性 布局 模型 的 属性 




















属 性 作 用 
box-orient 使 区 块 在 垂直 或 水 平方 向 上 堆积 
box-direstron 改变 默认 的 由 上 至 下 或 由 左 至 右 的 堆积 顺序 
box-ordinal-group 按 顺 序 指定 需要 显示 的 区 块 编 号 ， 比 box-direction 提 供 更 强 的 堆积 顺序 控制 力 
box-flex 使 区 块 弹性 地 填充 其 他 区 块 定位 后 的 可 用 剩余 空间 
box-flex-group 使 用 编号 将 弹性 区 块 进行 分 组 ， 当 有 剩余 空间 时 浏览 器 能 够 首先 调整 位 于 第 一 分 组 内 的 
区 块 宽度 ， 如 还 有 额外 空间 再 考虑 第 二 分 组 ， 以 此 类 推 
box-align a SKRA RIAA DP al OTST Behe, BABET Dr EL oc By AA Ze le] LA GER h S 
等 高 的 区 块 
box-pack 用 与 区 块 相同 的 排列 方式 来 控制 其 对 齐 与 定位 
box-lines MRE FTC ICE UR PEE ISI— TTA, TERT. BRB Zarit. mE H 
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7.4 弹性 布局 模型 的 符 代 品 


弹性 布局 模型 并 不 是 CSS3 中 唯一 的 布局 工具 。 还 有 其 他 的 布局 系统 也 正 处 于 工作 草案， 鲜 
有 六 览 如 支持 。 这 里 会 先 讨论 一 个 支持 度 最 好 ， 用 途 广 泛 的 box-sizing 属性 ， 然 后 再 看 看 有 
什么 其 他 可 以 期 待 的 。 


7.4.1 box-sizing 属 性 


在 W3C 的 传统 CSS2.1 盒 模型 中 ， 一 般 是 通过 声明 width FH height 的 值 来 控制 内 容 区 域 
的 宽度 和 高 度 ， 然 后 再 附加 上 内 边 距 和 边框 等 。 这 个 在 术语 上 被 称 为 内 容 盒 模型 。 通 常设 计 师 和 
开发 者 会 对 此 习 以 为 肖 ,不 加 思索 。 其 实 这 个 模型 在 某 些 情况 下 并 不 是 十 分 方便 ， 比如 为 一 个 容 
器 的 宽度 和 内 边 距 设置 不 同 衡量 单位 时 ， 例 如 宽度 是 百分比 但 内 边 距 是 像素 值 。 
举例 来 说 ， 当 希望 为 页 面 中 的 三 个 产品 宣传 容 如 设置 不 同 的 背景 色 , 但 又 设置 一 定 像素 的 内 
边 距 来 保证 容 磺 内 的 内 容 不 会 完全 遮盖 住 背 景色 时 , 该 怎么 做 ? 当 希 望 为 每 一 个 容器 添加 边框 的 
时 候 该 怎么 做 ? 
为 了 实践 本 十 所 将 要 提 到 的 内 容 ， 请 打开 本 草 练 习 文 件 中 的 box-sizing_start.html。 这 跟 第 6 
章 中 的 页 面 是 一 致 的 ， 只 是 移 除了 媒体 查询 的 部 分 让 练习 更 简单 一 些 。 
找到 116 行 已 经 存在 的 .feature 规则 ， 在 页 面 head 区 的 样式 表 代 码 的 中 间 位 置 。 修 改 
padding 值 为 每 个 容 絮 增加 底部 和 周边 的 内 边 距 : 
.feature { 
float: left; 
width: 30$; 
margin: 0 4.5% 0 0; 
padding: 130px 15px 5px 15px; 


background-repeat: no-repeat; 
background-position: top center; 





























} 
接 下 来 ， 增 加 背景 色 和 边框 : 


.feature { 
float: left; 
width: 30%; 
margin: 0 4.5% 0 0; 
padding: 130px 15px 5px 15px; 
border: 1px dashed #3C9; 
background-color: hsla(0,0%,100%,.3); 
background-repeat: no-repeat; 
background-position: top center; 


PAP USP ED tae PTE. 9B — Bee AEA AR (图 7-26), ike, AE ERAN 
RAGE 30% 的 空间 ， 然 后 要 加 上 2 像素 的 边框 ， 以 及 30 像素 的 内 边 距 ， 此 时 如 琳 再 为 第 一 个 
和 第 二 个 容 絮 设置 4.5% 的 外 边 距 的 话 ， 三 个 容 禹 所 占据 的 空间 的 总 和 将 会 超过 100%。 比 100% 
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大 多 少 呢 ?这 目前 还 古 未 知 的 , 在 不 同 显示 设备 上 会 有 所 不 同 , 重要 的 是 混合 设置 像素 和 百分比 
将 会 使 找到 一 个 合适 的 宽度 变 得 不 太 可 能 。 
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; Donec eu libero sit amet 
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7-206 B= ae TS, ARTE RAH D 100% 


Ay SAE Aa, b X] RET A Bs HY BEE. “AFT REM 30% 变 成 25% 时 , 在 特定 的 窗 
口 大 小 上 , R= ITCH KHER íT  —— Be EERE AE, 第 三 个 容 历 还 是 会 换行 显示 
7-27)。 另 外 ， 在 非常 宽 的 窗口 宽度 上 ， 在 第 三 个 容 恬 的 右边 将 会 有 一 段 空 白 的 空间 。 它 们 不 能 
够 总 是 很 好 地 适应 宽度 。 

除了 改变 容 颖 的 宽度 之 外 ， 男 外 还 有 一 个 方法 是 在 三 个 容 絮 的 内 部 各 岁 父 一 个 div, 然后 将 
边框 和 内 边 距 都 增加 到 这 个 藤 入 的 div b, 这样， 外 部 的 三 个 容 各 还 是 精确 地 各 占 30% 的 宽度 ， 
边框 和 内 边 距 的 宽度 都 属于 内 部 和 瞬 入 的 aiv。 和 通 入 一 个 这 样 的 div 不 会 有 多 麻烦 ， 但 是 在 一 个 
比较 复杂 的 设计 中 ， 瞬 入 的 div 的 数量 可 能 会 稍微 有 点 多 ， 这 将 导致 HTML 以 及 CSS 的 开发 时 
间 和 文件 大 小 都 会 大 大 增加 。 
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tempor sit amet, ante. Donec eu 
libero sit amet quam egestas 
semper. Aenean ultricies mi vitae 
est. Mauris placerat eleifend leo 
Quisque sit amet est et sapien 


ipsum rutrum orci, sagittis tempus 


lacus enim ac dui. Donec non 
enim in turpis pulvinar facilisis. Ut 


felis. 


Candies Pastries Desserts 
TRUFFLES. BARS. CROISSANTS. CAKES. PIES. TARTS. 
CARAMELS, AND DANISHES, CREAM COOKIES, AND MORE 
MORE PUFFS. AND MORE RAS 

Donec eu libero sit 
Pellentesque habitant Vestibulum tortor 

amet quam egestas 
mordi tristique quam, feugiat vitae. 


senectus et netus et 


malesuada fames ac 


turpis egestas eu libero sit 


Vestibulum tortor quam « 
quam, feugiat vitae 
ultrices eget tempor 


SH amet, ante. 


ultrices eget, tempor 
sit amet ante. Donec 


amet 





semper. Aenean 


ultrices mi vit 


semper. Aenear 

trices mi vitae est 
Mauris placerat 
eleifend leo 
Vestibulum tortor 
quam, feugiat vitae 
ae est ultrices eget. tempor 


sit amet, ante 


venvv t Pellen tesque 
habitant morbi 
tris tique s senectus et netus et 
malesuada fames ac turpis 
egestas 


NEWS 


Vestibulum auctor dapibus 


neque 


Read more at our blog and 
follow us on Twitter 


Donec eu libero sit amet quam 
egestas semper. Aenean 
ultricies mi vitae est. Mauris 
placerat eleifend leo. Quisque 


sit amet est et sapien 


Candies 
TRUFFLES. BARS 
CARAMELS. AND 
MORE 


Pellentesque 
habitant morbi 

trist que senectus et 
netus et malesuada 
fames ac turpis 
egestas. Vestibulum 
tortor quam, feugiat 
vitae, ultricies eget 


tempor sit amet 


ipsum rutrum orci, sagittis 
tempus lacus enim ac dui. 
Donec non enim in turpis 
pulvinar facilisis. Ut felis. 


eie 


Pastries 


CROISSANTS. 
DANISHES, CREAM 
PUFFS, AND MORE 


Vestibulum tortor 
quam, feugiat vitae 
ultricies eget 
tempor sit amet 
ante. Donec ev 
libero sit amet 
quam egestas 
semper. Aenean 


ultnoes mi vitae est 


"-— — 

habitant morbi 
tristique senectus et netus et 
malesuada fames ac turpis 
egestas. 


NEWS 


Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit 


li inci ris e 


Read more at our blog and 
follow us on Twitter 


ante. 





Desserts 
CAKES. PIES 
TARTS. COOKIES. 
AND MORE 


Donec eu libero sit 
amet quam egestas 
semper, Aenean 
ultrices mi vitae est 
Mauris placerat 
eleitend leo 
Vestibulum tortor 
quam, feugiat vitae 
ultricies eget 
tempor sit amet 


ante 





减少 宽度 的 方法 对 于 大 一 点 的 可 视 区 域 还 有 作用 ， 但 是 对 于 很 罕 的 窗 
就 不 行 了 

CSS3 引入 了 一 个 更 有 效率 的 方法 ， 无 需 修 改 HTML 代码 ， 
这 个 属性 采用 了 一 种 新 的 边框 盒 模 于 而 不 是 传统 的 内 容 盒 模型 。 
训 览 右 会 从 容 磺 的 内 部 裁剪 空间 给 内 边 跑 和 边框 使 用 , 而 不 是 把 它们 的 空 


这 样 容 奏 所 实际 占用 的 宽度 和 声明 的 宽度 就 一 直 保持 一 致 了 。 
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这 就 是 新 的 box-sizing 属性 。 
当 一 个 容器 使 用 边框 盒 模 型 时 ， 
zs 则 附加 上 去 (图 7-28)。 





r 
"NEW" BOX MODEL | 
Ibox-sizing: border-box; width: 450px; padding: 20px; border-width: 4px; 





450 pixels 


“OLD” BOX MODEL 
Ibox-sizing: content-box; width: 450px; padding: 20px; border-width: 4px; 
| 





图 7-28 ”内 容 盒 模型 和 边框 盒 模型 的 区 别 
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更 复杂 的 宽度 计算 

在 这 个 混合 单位 例子 中 , 另外 一 个 将 要 实现 的 有 用 的 特性 是 calc Wit, 它 能 够 使 用 在 所 
有 接受 长 度 值 的 地 方 ， 比 如 宽度 、 外 边 距 ， 它 接受 一 个 计算 之 后 的 结果 。 举 例 来 说 ， 在 上 述 的 
TARGL, TURBARAZEYREA: calc (30$-32px), 

Calc 功能 最 酷 和 最 强大 之 处 在 于 能 够 使 用 比 上 述 值 更 复杂 的 计算 等 式 来 获得 长 度 值 ， 这 
比 box-sizing 所 能 够 处 理 的 情况 要 更 多 一 些 。 不 好 的 一 面 在 于 计算 等 式 里 面 的 数值 只 能 够 
硬 编 码 ， 如 果 以 后 要 改变 某 个 数值 比如 内 边 距 ， 就 不 得 不 在 calc 里 面 做 联动 改变 。 

不 幸 的 是 ,本 书 撰写 之 时 , 还 没有 浏览 器 可 以 支持 这 个 功能 。 即 将 到 来 的 Firefox 4 也许 会 ， 
同时 也 支持 min Fe max 功能 ， 但 是 这 些 功 能 在 Firefox 目前 发 布 的 beta 版 本 中 尚未 得 到 支持 ， 
如 果 要 获取 更 多 关于 Firefox 对 于 calc 功能 实现 以 及 相应 的 一 些 例子 , 请 参见 http://hack.mozilla. 
org /2010/06/css3-calc, W3C 官方 的 定义 请 参见 www.w3.org/TR/css3-values/#calc 。 





当 宽 度 值 重新 设 定 为 30% 以 后 , 为 容器 在 .feature 规则 里 增加 pox-sizing 属性 , 需要 加 
上 -moz- 和 -webkit- 前 级 版 本 : 


.feature { 
float: left; 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
width: 30$; 
margin: 0 4.52 0 0; 
padding: 130px 15px 5px 15px; 
border: 1px dashed #3C9; 
background-color: hsla(0,0%,100%,.3);3; 
background-repeat: no-repeat; 
background-position: top center; 


】 

-moz- 版 本 是 Firefox 专用 的 ， -webkit- 版 本 同时 影响 Safari 和 Chrome， 而 设 有 浏览 器 前 
绥 的 版 本 将 会 作用 于 以 后 的 Opera 和正 8 之 后 的 版 本 。 现 在 每 个 容 娟 占用 的 总 空间 还 是 3096, 边 
框 和 内 边 距 的 占用 空间 包含 在 这 之 内 ， 这 样 容 龙 内 的 内 容 所 占据 的 空间 就 减少 了 32 像素 。 这 种 
方式 使 得 这 三 个 容 帮 在 任何 情况 下 都 正好 占 满 一 行 〈 图 7-29), 




















表 7-5 box-sizing 属 性 的 浏览 器 支持 度 
IE Firefox Opera Safaril Chrome 
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box-sizing 属性 的 来 龙 去 脉 

box-sizing 属性 是 基本 用 户 界 面 (Basic User wind 模块 的 一 部 分 ， 你 可 以 在 
www.w3.org/tr/css3-ui 找到 它 。 它 能 够 让 页 面 的 盒 模型 在 内 容 盒 模型 和 边框 盒 模型 之 间 转 换 。 
A ee ee 框 盒 模型 则 会 从 容器 内 部 切 
分 出 空间 供 边框 和 内 边 距 使 用 。 

ee padding-box， 这 个 值 意味 着 只 有 内 边 距 的 宽度 是 从 容器 内 部 切 
分 出 来 的 ,边框 的 宽度 还 是 额外 附加 到 容器 之 外 。 这 个 值 不 是 W3C 的 规范 ，W3C MUA 
添加 它 的 打算 。 

box-sizing 属性 可 以 用 于 如 下 一 些 场 合 ， 

O A—-+#—BS LEAS Si, 

器 所 占用 的 总 的 空间 大 小 。 
a 让 一 个 容器 100% 的 拉 伸 迁 


这 样 就 可 以 使 用 box-sizing 来 确认 这 个 容 


应 久 容 器 ， 但 与 此 同时 这 个 容器 还 能 有 边框 和 内 边 距 。 


IE 7 及 之 前 版 本 的 兼容 方案 
IE 7 及 之 前 的 版 本 并 不 支持 box-sizing。 跟 弹性 布局 模型 类 似 ， 
性 效果 的 属性 不 同 ， 所 以 必须 为 不 支持 的 浏览 器 提供 替代 方案 。 在 本 节 的 例子 中 ， 


box-sizing 和 纯粹 装饰 
了 最 容 多 实现 的 
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符 代 方案 就 是 按照 百分比 而 不 是 像 素 值 来 设置 内 边 中 ,然后 相应 的 减少 容 妖 的 宽度 百分比 。 添 加 
如 下 的 样式 规则 : 


.ie6 .feature, .ie7 .feature 4 
Width: 25.5%; 
padding: 130px 2% 5px 2$; 
] 


这 会 有 效 地 把 每 个 容器 的 总 宽度 限制 到 30% 一 一 两 边 各 2% 的 内 边 距 加 上 25.5% 的 宽度 总 共 
是 29.596， 这 样 是 为 了 留 下 一 点 点 空间 给 基于 像素 的 边框 。 虽 然 按照 百分比 定义 的 内 边 距 并 不 大 
理想 , 但 是 它 看 起 来 和 基于 像素 定义 的 内 边 距 的 区 别 不 是 特别 大 , 而 且 它 至 少 会 比 第 三 个 容 絮 被 
过 换行 的 状况 要 强 得 多 。 

另外 一 个 可 选 的 检 代 方案 是 使 下 进入 怪异 模式 。 在 这 个 模式 下 IE 会 使 用 类 似 边框 使 模型 的 
定义 来 计算 空间 。 但 我 并 不 建议 这 样 做 ， 首先, 使 下 7 进入 怪异 模式 本 身 就 是 一 件 很 难 的 事情 。 
通常 它 会 要 求 使 用 一 个 古老 的 或 者 韭 法 格式 的 文档 类 型 ， ROMA bie ae ala. Kk, — 
旦 进入 怪异 模式 , 那么 整个 网 站 的 容 如 都 将 使 用 边框 盒 模 型 ,这样 之 前 工作 正常 的 一 些 窑 右 将 被 
迫 需 要 进行 修改 。 

最 后 一 种 box-sizing 的 替代 方案 是 使 用 脚本 Dean Edwards fy "IE 7” MÆ 
(http://code.google. com/p/ie 7-js) 能 够 让 box-sizing 在 IE7 上 上 工作。 当然 ,目前 只 有 这 两 个 版 
本 的 js 才能 正常 工作 : IE 8.js 和 IE9.js。 使 用 脚本 的 缺点 是 脚本 可 能 会 被 禁用 ,而 box-sizing 
这 个 属性 对 于 总 的 布局 和 外 观 来 讲 是 比较 重要 的 ， 所 以 依赖 脚本 解决 问题 会 有 一 点 小 风险 。 








7.4.2 ”未 来 的 布局 系统 


弹性 布局 模型 并 不 是 CSS3 中 唯一 的 新 布局 方式 。 还 有 两 个 布局 系统 ， 称 为 模板 布局 和 网 格 
布局 。 这 两 者 都 在 开发 阶段 (特别 是 网 格 布局 ) ， 目 前 还 设 有 浏览 妖 可 以 支持 它们 ， 甚 至 还 没有 
训 览 右 计 划 这 么 做 。 但 现在 简单 介绍 一 下 还 是 可 以 让 我 们 对 未 来 布局 系统 的 发 展 有 所 了 解 。 

1. 模板 布局 

CSS3 模板 布局 模型 (以 前 称 为 “高 级 布局 ) 能 让 开发 者 将 内 容 放 置 到 页 面 布局 的 “ 插 槽 
中 去 。 通 过 将 display 的 值 设 置 成 一 个 字母 集合 可 以 定义 页 面 的 “ 搬 槽 ”， 就 像 ASCII 码 绘图 亏 
术 一 样 ， 举 例 来 说 ， 可 以 像 下 面 这 样 定 义 : 





body { 
display: "aaa" 
"pec"; 
"ddd"; 


) 
Peat ART E a APAE FRH EAK, ER PT 


#header { position: a; } 
#content { position: b; } 
#sidebar { position: c; } 
#footer { position: d; } 
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当然 这 个 系统 可 以 比 上 面 所 示 的 复 困 很 多 一 一 我 们 还 没有 定义 各 个 插 模 的 宽度 , 每 一 行 的 高 
RE, 或 者 元 素 的 则 距 。 但 是 重点 在 于 ， 可 以 将 一 个 HTML 代码 中 的 任意 div 放置 到 页 面 的 任意 位 
置 , 也 可 以 轻易 地 创建 多 列 布局 。 有 些 人 会 非 第 喜欢 这 里 面 的 灵活 性 和 精确 性 ， 也 有 些 人 可 能 会 
很 讨厌 CSS3 模板 布局 背后 的 思想 。 

无 论 如 何 , 在 www.w3.org/TR/css3-layout 可 以 了 解 关 于 模板 布局 的 细 攻 ， 如 采 想 实际 尝试 一 
下 的 话 ，Alexis Deveria 的 jQuery 插件 可 以 实现 模板 布局 ; 参见 http://code.google.com/p/ 
css-template-layout, 

2. 网 格 布局 

CSS3 网 格 布 局 其 至 可 以 让 你 在 不 使 用 这 些 字 母 的 情况 下 定义 一 个 布局 网 格 。 只 需要 使 用 
grid-columns 和 grid-rows 这 两 个 属性 就 能 明确 声明 一 个 网 格 。 禅 动 定位 和 绝对 定位 在 这 里 
还 是 需要 的 ， 但 是 这 里 的 浮动 和 绝对 都 可 以 是 相对 于 网 格 的 ， 就 是 之 前 用 新 的 gr 单位 定义 的 网 
格 。 跟 新 的 float -offset 属性 一 样 ， 一 个 网 格 单位 加 相 当 于 一 栏 的 宽度 。 

网 格 布局 的 第 一 个 草案 (www.w3.org/TR/css3-grid) 出 现 于 2007 年 9 月 ， 一 直到 现在 也 没有 
任何 更 新 。 因 此 它 的 前 景 并 不 明朗 。W3C 可 能 会 考虑 把 模板 布局 和 网 格 布 局 合并 。 即 使 它们 还 古 
独立 发 展 ， 它 们 如 何 才能 同时 使 用 , 以 及 如 何 和 弹性 布局 模型 一 起 使 用 , 这些 问 题 都 非 第 不 明晰 。 
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2 束 语 


感谢 你 一 路 陪伴 我 历经 这 些 吸引 人 的 视觉 效 末 、 美 妙 的 版 式 、 强 大 的 选择 历 ， 以 及 实用 的 可 
用 性 改进 方案 。 你 已 经 学 会 了 如 何 通 过 使 用 这 些 高 效 、 先 进 且 合乎 规范 的 CSS 技巧 为 用 户 打造 
一 个 拥有 尽 可 能 优质 和 丰富 体验 的 页 面 。 
我 希望 你 能 将 所 学 的 技巧 应 用 到 开发 中 , 无 论 是 为 了 试验 ， 或 是 打发 时 间 ， 还 是 真 的 用 来 改 
进 自己 的 作品 。 正 如 我 先前 所 言 ，CSS3 仍旧 在 不 断 地 发 展 之 中 ， 我 们 Web 设计 师 也 在 持续 地 学 
习 如 何 使 它 物 尽 其 用 。 当 你 借助 它 的 帮助 实现 了 什么 酪 炫 效果 ， 请 记得 分 享 ! 可 以 通过 
www.stunningcss3.com 上 的 表单 写 邮件 给 我 , 或 是 在 Twitter A 标签 分 享 给 整个 
Web 设计 社区 。 让 我 们 从 彼此 的 成 果 中 汲取 精华 ， 共 同 使 Web 变 得 更 加 “ 令 人 惊艳 ”1 


图 表 


1-1 www.w3.org 

1-3 ~ B| 1-7 www.hsrc.unc.edu 

1-8 和 图 1-9 www.twitter.com 

2-8 www.digitalmediaminute.com/reference/entity 
2-26 www.useragentman.com/IETransformsTranslator 
3-27 和 图 3-28 www.fontsquirrel.com 

5-8 http://en.wikipedia.org 


7-23 www.cssstickyfooter.com 


示例 文件 中 的 资源 


第 3、4、5 章 的 示例 文件 中 的 水 波纹 图 片 是 使 用 Obsidian Dawn 所 开发 的 Photoshop 笔 刷 绘 
制 而 成 (www.obsidiandawn.com/water-stains-photoshop-gimp-brushes ) 。 

第 3、4、5 章 的 示例 文件 中 所 提供 的 Prelude 字体 是 来 自 于 Font Squirrel (www.fontsquirrel. 
com ) 。 

第 3、4、5 章 的 示例 文件 中 所 提供 的 图 标 是 Mark James 所 设计 的 famfamfam Silk 图 标 集 的 
一 部 分 (www.famfamfam.com/lab/icons/silk ) , 

第 5 章 的 示例 文件 中 所 提供 的 Modernizr 脚本 (modernizr-1.6.min.js) 是 由 Faruk Ates 和 了 Paul 
Irish 所 开发 (www.modernizr.com ) 。 

第 6 章 的 示例 文件 中 所 提供 的 css3-mediaqueries-js 脚本 (css3-mediaqueries.js) 是 由 Wouter van 
der Graaf 所 开发 (http://code.google.com/p/css3-mediaqueries-js)。 

第 6、7 章 的 示例 文件 中 所 提供 的 图 片 是 由 Icon Eden 所 设计 的 Yummy 图 标 集 的 一 部 分 的 
(www.iconeden.com/icon/yummy-free-icons.html ) 。 

第 6、7 章 的 示例 文件 中 所 提供 的 Nadia Serif 字体 来 自 于 Kernest (www.kernest.com) , 

在 此 我 对 所 有 提供 这 些 资源 并 准许 我 在 书 中 使 用 它们 的 开发 者 以 及 设计 师表 示 最 右 心 的 
感谢 。 





Stunning CSS3 a project-based guide to the latest in CSS 


CSS USAT 


CSS3 为 Web 的 视觉 样式 语言 注入 了 强大 的 新 功能 ， 让 设计 人 员 更 加 轻松 自如 地 设计 优美 而 引人入胜 的 内 容 。 借 
助 CSS3， 不 使 用 图 片 就 可 以 创建 半 透 明 背 景 、 渐 变 、 阴 影 等 和 村人 眼球 的 视觉 效果 ; 还 可 以 使 用 漂亮 、 独 特 、 非 Web 
安全 的 字体 显示 文本 ; 不 用 Flash 就 可 以 创建 动画 ; 不 用 JavaScript 就 可 以 定制 适应 用 户 的 设备 和 屏幕 尺寸 的 设计 。 

本 书 通过 一 系列 实用 且 新 颖 的 范例 ， 向 读者 展示 如 何 实现 以 上 功能 和 更 多 效果 。 每 章 都 提供 了 几 个 实例 ， 让 你 
可 以 应 用 到 正在 开发 的 项 目 中 ， 或 从 它们 的 设计 思路 中 获取 灵感 。 

本 书 还 介绍 了 以 下 CSS3 技 术 : 

€ 如 何 使 用 CSS3 改 善 页 面 外 观 ， 提 高 可 用 性 、 可 访问 性 和 效率 

© 处 理 不 文 持 CSS3 的 早期 浏览 器 的 时 机 、 解 决 方案 和 替代 方案 

4 如 何 利 用 独特 的 字体 排版 技术 和 漂亮 的 图 片 细节 创建 绝妙 的 设计 
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